/* eslint-disable @next/next/no-img-element */
import React from "react";
import { logos } from "./constants";

import "./business-grid.css";

type BusinessGridMobileCardProps = {
  src: string;
  alt: string;
};

const BusinessGridMobileCard = ({ src, alt }: BusinessGridMobileCardProps) => {
  return (
    <div className="relative aspect-square bg-white border-r border-b border-[#e5e5e5]">
      {/* Inner content area with 2px inset like desktop */}
      <div className="absolute inset-[2px] bg-white flex items-center justify-center p-4">
        <img
          src={src}
          alt={alt}
          className="max-w-[70%] max-h-[70%] object-contain grayscale transition-all duration-300"
        />
      </div>
    </div>
  );
};

const BusinessGridMobile = () => {
  return (
    <div className="px-4 sm:px-6 md:px-8">
      {/* Grid matching desktop 5-column feel, but 2 cols on mobile, 3 on tablet */}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 border-t border-l border-[#e5e5e5]">
        {logos.map((logo) => (
          <BusinessGridMobileCard
            key={logo.id}
            src={logo.src}
            alt={logo.alt}
          />
        ))}
      </div>
    </div>
  );
};

export default BusinessGridMobile;