"use client";

import { Section } from "@/components/ui/Section";
import { Heading, Text } from "@/components/ui/Typography";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { container } from "@/lib/utils";

// Define the review data structure
interface Review {
  id: number;
  author: string;
  comment: string;
}

export function CustomerReviews() {
  const { t, locale } = useTranslation();
  
  // Definiraj reviewse po jeziku
  const reviews: Review[] = locale === 'en' ? [
    {
      id: 1,
      author: "Emily Johnson",
      comment: "\"The Build a Box feature made gift-giving so easy and special!\""
    },
    {
      id: 2,
      author: "Michael Smith",
      comment: "\"Sent's service exceeded my expectations every time!\""
    },
    {
      id: 3,
      author: "Sarah Lee",
      comment: "\"The quality of the items was outstanding!\""
    }
  ] : [
    {
      id: 1,
      author: "Ana Kovačić",
      comment: "\"Opcija 'Složi kutiju' učinila je darivanje tako jednostavnim i posebnim!\""
    },
    {
      id: 2,
      author: "Marko Horvat",
      comment: "\"Usluga Sent-a nadmašila je moja očekivanja svaki put!\""
    },
    {
      id: 3,
      author: "Ivana Novak",
      comment: "\"Kvaliteta proizvoda bila je izvanredna!\""
    }
  ];

  return (
    <Section className="bg-white overflow-hidden">
      {/* Keep the heading inside container */}
      <div className={container}>
        <Heading level={2} className="text-center mb-[60px]">
          {t('customerReviews.title')}
        </Heading>
      
        {/* Mobile: Full width scrollable container, Desktop: Grid */}
        <div className="md:hidden -mx-4">
          <div className="flex overflow-x-auto pb-6 px-4 snap-x no-scrollbar">
            {/* Add empty div at start to ensure space */}
            <div className="shrink-0 w-[5%]"></div>
            
            {reviews.map((review) => (
              <div 
                key={review.id}
                className="bg-secondary shrink-0 w-[85%] sm:w-[70%] h-[235px] p-8 flex flex-col snap-center mx-3"
              >
                <Text className="mb-6 flex-grow">
                  {review.comment}
                </Text>
                
                <div className="mt-auto">
                  <Text className="text-primary font-bold">{review.author}</Text>
                </div>
              </div>
            ))}
            
            {/* Add empty div at end to ensure space */}
            <div className="shrink-0 w-[5%]"></div>
          </div>
        </div>
        
        {/* Desktop: Original grid layout */}
        <div className="hidden md:grid md:grid-cols-3 gap-8">
          {reviews.map((review) => (
            <div 
              key={review.id}
              className="bg-secondary h-[235px] p-8 flex flex-col"
            >
              <Text className="mb-6 flex-grow">
                {review.comment}
              </Text>
              
              <div className="mt-auto">
                <Text className="text-primary font-bold">{review.author}</Text>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}