import { cn } from '@/lib/cn';

interface Props {
  powerCv: number;
  engine: string;
  vehicleType: string;
}

interface SpecItemProps {
  label: string;
  value: React.ReactNode;
  bordered?: boolean;
}

const SpecItem = ({ label, value, bordered }: SpecItemProps) => (
  <div
    className={cn(
      'min-w-72 px-6 py-2',
      bordered && 'max-lg:border-y-text-primary max-lg:my-10 max-lg:border-y max-lg:py-10',
      bordered && 'lg:border-x-text-primary lg:border-x',
    )}
  >
    <dt className="text-text-secondary text-xl">{label}</dt>
    <dd className="text-text-primary text-3xl font-medium">{value}</dd>
  </div>
);

export const HighlightedSpecs = ({ powerCv, engine, vehicleType }: Props) => {
  return (
    <dl className="bg-foreground my-10 w-full items-center justify-center gap-2 py-20 max-lg:px-4 lg:flex">
      <SpecItem label="Potencia" value={powerCv} />
      <SpecItem label="Motorización" value={engine} bordered />
      <SpecItem label="Tipo de vehículo" value={vehicleType} />
    </dl>
  );
};