---
import { Image } from 'astro:assets';
import type { CollectionEntry } from 'astro:content';
import { lt } from '../i18n/lt';
import { formatMileage, formatPrice } from '../lib/format';

type Props = {
  car: CollectionEntry<'cars'>;
  compact?: boolean;
};

const { car, compact = false } = Astro.props;
const title = `${car.data.year} ${car.data.make} ${car.data.model}`;
---

<a
  href={`/automobiliai/${car.slug}`}
  class:list={[
    'group block rounded-[2rem] bg-paper transition-transform duration-300 ease-out-quart focus-visible:outline-burgundy-600',
    compact ? 'opacity-75' : 'hover:-translate-y-1',
  ]}
  aria-label={`${lt.actions.viewCar}: ${title}`}
>
  <div class="overflow-hidden rounded-[1.5rem] bg-wash">
    <Image
      src={car.data.photos[0]}
      alt={`${car.data.make} ${car.data.model} automobilio nuotrauka`}
      width={720}
      height={540}
      loading="lazy"
      format="avif"
      class="aspect-[4/3] w-full object-cover"
    />
  </div>
  <div class="pt-4">
    <p class="text-sm text-muted">{car.data.city}</p>
    <h3 class="mt-1 text-xl font-semibold tracking-[-0.04em] text-ink">{title}</h3>
    <p class="mt-3 text-2xl font-semibold tracking-[-0.05em] text-burgundy-700 tabular">{formatPrice(car.data.price)}</p>
    <p class="mt-2 text-sm text-muted tabular">
      {formatMileage(car.data.mileage)} · {car.data.fuel} · {car.data.transmission}
    </p>
  </div>
</a>
