import Link from 'next/link';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { Section, Container } from '@/components/ui';

interface ProductsPageProps {
  params: {
    locale: string;
  };
}

export default function ProductsPage({ params }: ProductsPageProps) {
  const t = useTranslations('Products');

  const categories = [
    { 
      title: t('categories.lowVoltage.title'), 
      desc: t('categories.lowVoltage.description'),
      img: '/uploads/2024/11/low-voltage-category.webp',
      icon: '/uploads/2024/11/Low-Voltage.svg',
      href: `/${params.locale}/products/low-voltage-cables`
    },
    { 
      title: t('categories.mediumVoltage.title'), 
      desc: t('categories.mediumVoltage.description'),
      img: '/uploads/2024/11/medium-voltage-category.webp',
      icon: '/uploads/2024/11/Medium-Voltage.svg',
      href: `/${params.locale}/products/medium-voltage-cables`
    },
    { 
      title: t('categories.highVoltage.title'), 
      desc: t('categories.highVoltage.description'),
      img: '/uploads/2024/11/high-voltage-category.webp',
      icon: '/uploads/2024/11/High-Voltage.svg',
      href: `/${params.locale}/products/high-voltage-cables`
    },
    { 
      title: t('categories.solar.title'), 
      desc: t('categories.solar.description'),
      img: '/uploads/2024/11/solar-category.webp',
      icon: '/uploads/2024/11/Solar.svg',
      href: `/${params.locale}/products/solar-cables`
    }
  ];

  return (
    <div className="flex flex-col min-h-screen">
      <Section className="bg-neutral-light">
        <Container>
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h1 className="text-4xl font-bold mb-6">{t('title')}</h1>
            <p className="text-xl text-text-secondary">
              {t('subtitle')}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {categories.map((category, idx) => (
              <Link key={idx} href={category.href} className="group block bg-white rounded-lg overflow-hidden shadow-sm border border-neutral-dark hover:shadow-md transition-all">
                <div className="relative h-64 overflow-hidden">
                  <Image 
                    src={category.img} 
                    alt={category.title}
                    fill
                    className="object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
                </div>
                <div className="p-8">
                  <div className="flex items-center mb-4">
                    <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                      <img src={category.icon} alt="" className="w-8 h-8" />
                    </div>
                    <h2 className="text-2xl font-bold text-text-primary group-hover:text-primary transition-colors">{category.title}</h2>
                  </div>
                  <p className="text-text-secondary text-lg mb-6">
                    {category.desc}
                  </p>
                  <span className="text-primary font-medium group-hover:translate-x-1 transition-transform inline-flex items-center">
                    {t('viewProducts')} &rarr;
                  </span>
                </div>
              </Link>
            ))}
          </div>
        </Container>
      </Section>
    </div>
  );
}