"use client";

import { Button } from "@/components/ui/Button";
import { Section } from "@/components/ui/Section";
import { Heading, Text } from "@/components/ui/Typography";
import { useTranslation } from "@/lib/hooks/useTranslation";
import type { Product } from "lib/shopify/types";
import { ProductSlider } from "./ProductSlider";

interface ProductSliderSectionProps {
  products: Product[];
}

/**
 * Presentation component for the product slider section
 * Handles the layout and presentation aspects, but not data fetching
 */
export function ProductSliderSection({ products }: ProductSliderSectionProps) {
  const { t } = useTranslation();
  
  return (
    <div className="overflow-x-hidden w-full">
      <Section spacing="medium">
        <div className="mb-8">
          {/* Container for header section with relative positioning */}
          <div className="relative">
            {/* Button positioned absolutely to the right */}
            <div className="hidden sm:block absolute right-0 bottom-[0px]">
              <Button 
                href="/search" 
                variant="custom" 
                size="lg"
                fullWidthMobile={false}
              >
                {t('productSlider.button')}
              </Button>
            </div>
            
            {/* Title and description */}
            <div className="mb-4">
              <Heading level={2}>{t('productSlider.title')}</Heading>
            </div>
            
            <div>
              <Text size="lg" className="mb-4 sm:mb-0">{t('productSlider.description')}</Text>
            </div>
          </div>
          
          {/* Mobile full-width button */}
          <div className="sm:hidden mt-2">
            <Button 
              href="/search" 
              variant="custom" 
              size="lg"
              fullWidthMobile
            >
              {t('productSlider.button')}
            </Button>
          </div>
        </div>

        {/* Carousel container s overflow da se vidi 4. proizvod */}
        <div className="relative w-full overflow-visible">
          <ProductSlider products={products} />
        </div>
      </Section>
    </div>
  );
}