---
import { lt } from '../i18n/lt';
import { formatMileage } from '../lib/format';

type Props = {
  year: number;
  mileage: number;
  fuel: string;
  transmission: string;
};

const { year, mileage, fuel, transmission } = Astro.props;
const specs = [
  [lt.labels.year, String(year)],
  [lt.labels.mileage, formatMileage(mileage)],
  [lt.labels.fuel, fuel],
  [lt.labels.gearbox, transmission],
];
---

<dl class="grid w-full min-w-0 grid-cols-2 overflow-hidden rounded-[1.75rem] border border-line bg-paper sm:grid-cols-4">
  {specs.map(([label, value]) => (
    <div class="min-w-0 border-line px-4 py-4 odd:border-r sm:border-r sm:last:border-r-0">
      <dt class="text-xs uppercase tracking-[0.12em] text-muted">{label}</dt>
      <dd class="mt-1 font-semibold text-ink tabular">{value}</dd>
    </div>
  ))}
</dl>
