import { AreaCard } from "./areaCard";
import HorizontalAutoScroll from "../HorizontalAutoScroll";
import { Area } from "@/types/area";

interface AreaSlidesProps {
  areas: Area[];
}

// Grid layout logic for 6 items (RTL):
// Assumption: Container has dir="rtl" or handled via CSS direction.
// In RTL Grid: Col 1 is Right, Col 4 is Left.
function getGridPosition(index: number): { size: 'large' | 'small'; position: { row: number; col: number; rowSpan?: number; colSpan?: number } } {
  if (index === 0) {
    // Vertical Item (Right): Spans 2 rows. Col 1 in RTL.
    return {
      size: 'large',
      position: { row: 1, col: 1, rowSpan: 2 }
    };
  }

  if (index === 1) {
    // Small Item (Top, next to Vertical) -> Col 2
    return {
      size: 'small',
      position: { row: 1, col: 2 }
    };
  }

  if (index === 2) {
    // Small Item (Top, Middle) -> Col 3
    return {
      size: 'small',
      position: { row: 1, col: 3 }
    };
  }

  if (index === 3) {
    // Small Item (Top, Far Left) -> Col 4
    return {
      size: 'small',
      position: { row: 1, col: 4 }
    };
  }

  if (index === 4) {
    // Small Item (Bottom, Under Index 1) -> Col 2
    return {
      size: 'small',
      position: { row: 2, col: 2 }
    };
  }

  if (index === 5) {
    // Wide Item (Bottom, Spanning Cols 3 & 4) -> Col 3, Span 2
    return {
      size: 'large',
      position: { row: 2, col: 3, colSpan: 2 }
    };
  }

  // Fallback
  return {
    size: 'small',
    position: { row: 1, col: 1 }
  };
}

export default function AreaSlides({ areas }: AreaSlidesProps) {
  return (
    <div className="overflow-x-hidden lg:pr-20 md:pr-10 pr-5 lg:px-20 md:px-10 px-5 bg-[#F1F5F9]">
      <div className="hidden md:grid md:grid-cols-4 md:grid-rows-2 pt-10 gap-6 h-[600px]">
        {areas.map((area, index) => {
          const { size, position } = getGridPosition(index);
          return (
            <AreaCard
              key={area.id}
              title={area.title}
              image={area.image}
              link={area.link}
              size={size}
              position={position}
              count={area.count}
            />
          );
        })}
      </div>

      <HorizontalAutoScroll classNames="md:hidden flex overflow-x-auto pt-10 pb-6 no-scrollbar">
        <div className="flex">
          {areas.map((area) => (
            <div key={area.id} className="shrink-0 w-[calc(50vw+50px)] mr-4">
              <AreaCard
                title={area.title}
                image={area.image}
                link={area.link}
                size="small"
                position={{ row: 1, col: 1 }}
                count={area.count}
              />
            </div>
          ))}
        </div>
      </HorizontalAutoScroll>
    </div>
  );
}