import { getAllContacts } from '@/actions/contact.action'
import { ContactProps } from '@/types'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from './ui/card'
import { Locale } from '@/i18n.config'
import Link from 'next/link'
import Image from 'next/image'

export default async function Contacts({ lang }: { lang: Locale }) {
  const fetchedContacts = await getAllContacts(lang)

  const visibleContacts = fetchedContacts
    .filter((contact) => contact.isVisible)
    .sort((a, b) => b.priority - a.priority)

  return (
    <>
      <h2 className="mb-4 text-3xl font-extrabold sm:text-4xl">Kontakty</h2>

      {visibleContacts.length === 0 && (
        <p className="text-xl font-semibold">Žádné kontakty</p>
      )}

      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 xl:grid-cols-6">
        {visibleContacts.map((contact, i) => (
          <Contact key={i} {...contact} />
        ))}
      </div>
    </>
  )
}

function Contact({
  position,
  description,
  email,
  phone,
  isDrylock,
}: ContactProps) {
  return (
    <Card className="relative col-span-2 sm:last:col-start-2 xl:last:col-start-auto">
      {isDrylock && (
        <div>
          <Image
            width={175}
            height={40}
            src={'/drylock.png'}
            alt="drylock"
            className="absolute right-[20px] top-[-12.5px] h-[25px] w-auto rounded-sm border bg-background px-1 py-0.5"
          />
        </div>
      )}
      <CardHeader className="pb-3">
        <CardTitle>{position}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          E-mail:{' '}
          <Link
            href={`mailto:${email}`}
            className="md:transition-colors md:duration-100 md:hover:text-primary"
          >
            {email}
          </Link>
        </p>
        <p>
          Telefon:{' '}
          <Link
            href={`tel:${phone}`}
            className="md:transition-colors md:duration-100 md:hover:text-primary"
          >
            {phone}
          </Link>
        </p>
      </CardContent>
    </Card>
  )
}