"use client"

import Image from "next/image"
import { Card, CardContent } from "@/shared/shadcn-ui/card"
import { Button } from "@/shared/shadcn-ui/button"
import { Download, Eye } from "lucide-react"
import { useLanguage } from "@/shared/language"

export function CertificatesPage() {
  const { t } = useLanguage()

  // This data would typically come from an API or CMS
  // We're keeping it as-is since it's dynamic content
  const certificates = [
    {
      id: 1,
      title: "ISO 9001:2015",
      description: "Сертификат системы менеджмента качества",
      image: "/placeholder.svg?height=400&width=300",
      issueDate: "15.03.2022",
      expiryDate: "15.03.2025",
    },
    {
      id: 2,
      title: "ISO 14001:2015",
      description: "Сертификат экологического менеджмента",
      image: "/placeholder.svg?height=400&width=300",
      issueDate: "10.05.2022",
      expiryDate: "10.05.2025",
    },
    {
      id: 3,
      title: "OHSAS 18001",
      description: "Сертификат системы управления охраной труда",
      image: "/placeholder.svg?height=400&width=300",
      issueDate: "22.07.2022",
      expiryDate: "22.07.2025",
    },
    {
      id: 4,
      title: "Сертификат качества топлива",
      description: "Подтверждение соответствия топлива стандартам качества",
      image: "/placeholder.svg?height=400&width=300",
      issueDate: "05.01.2023",
      expiryDate: "05.01.2024",
    },
    {
      id: 5,
      title: "Сертификат соответствия",
      description: "Соответствие услуг национальным стандартам",
      image: "/placeholder.svg?height=400&width=300",
      issueDate: "18.09.2022",
      expiryDate: "18.09.2025",
    },
    {
      id: 6,
      title: "Лицензия на хранение ГСМ",
      description: "Разрешение на хранение горюче-смазочных материалов",
      image: "/placeholder.svg?height=400&width=300",
      issueDate: "30.11.2021",
      expiryDate: "30.11.2026",
    },
  ]

  return (
    <>
      <main className="container mx-auto py-10">
        <div className="mb-10 text-center">
          <h1 className="mb-4 text-4xl font-bold">{t("certificates.title")}</h1>
          <p className="mx-auto max-w-2xl text-lg text-gray-600">{t("certificates.description")}</p>
        </div>

        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {certificates.map((certificate) => (
            <Card key={certificate.id} className="overflow-hidden transition-all duration-300 hover:shadow-lg">
              <div className="relative h-[300px] w-full overflow-hidden bg-gray-100">
                <Image
                  src={certificate.image || "/placeholder.svg"}
                  alt={certificate.title}
                  fill
                  className="object-contain p-4"
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                />
              </div>
              <CardContent className="p-6">
                <h3 className="mb-2 text-xl font-bold">{certificate.title}</h3>
                <p className="mb-4 text-gray-600">{certificate.description}</p>
                <div className="mb-4 text-sm text-gray-500">
                  <p>
                    {t("certificates.issueDate")}: {certificate.issueDate}
                  </p>
                  <p>
                    {t("certificates.expiryDate")}: {certificate.expiryDate}
                  </p>
                </div>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm" className="flex items-center gap-1">
                    <Eye size={16} />
                    <span>{t("common.buttons.view")}</span>
                  </Button>
                  <Button variant="outline" size="sm" className="flex items-center gap-1">
                    <Download size={16} />
                    <span>{t("common.buttons.download")}</span>
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="mt-16 rounded-lg bg-gray-50 p-8">
          <h2 className="mb-4 text-2xl font-bold">{t("certificates.requestInfo")}</h2>
          <p className="mb-6 text-gray-600">{t("certificates.requestInfoText")}</p>
          <div className="flex flex-wrap gap-4">
            <Button className="bg-red-600 hover:bg-red-700">{t("common.buttons.contactUs")}</Button>
            <Button variant="outline">{t("certificates.faq")}</Button>
          </div>
        </div> 
      </main>
    </>
  )
}