import {
  Color,
  EngineSize,
  PowerCV,
  TireTorque,
  Transmission,
  Wheels,
} from '@/components/sections/detailed/DetailsIcons';
import type { Car } from '@/types/detailed-car.types';

interface Props {
  information: Car['specs'];
}

const iconsClassNames = 'w-6 h-6 lg:w-7 lg:h-7 text-text-secondary';

const DetailIcons = {
  engine: <></>,
  engineSize: <EngineSize className={iconsClassNames} />,
  powerCv: <PowerCV className={iconsClassNames} />,
  torqueNm: <TireTorque className={iconsClassNames} />,
  transmission: <Transmission className={iconsClassNames} />,
  color: <Color className={iconsClassNames} />,
  wheels: <Wheels className={iconsClassNames} />,
};

const DetailLabels = {
  engine: '',
  engineSize: 'Tamaño del motor',
  powerCv: 'Poder del motor',
  torqueNm: 'Torque del motor',
  transmission: 'Transmisión',
  color: 'Color',
  wheels: 'Neumáticos',
};

export const OtherDetails = ({ information }: Props) => {
  const detailKeys: (keyof Car['specs'])[] = [
    'engineSize',
    'powerCv',
    'torqueNm',
    'transmission',
    'color',
    'wheels',
  ];

  return (
    <div className="malek-containter px-4 lg:px-48">
      <h3 className="title-h3 text-text-secondary my-10">Especificaciones completas</h3>
      <div className="grid items-center justify-center gap-y-16 md:grid-cols-2 lg:grid-cols-3">
        {detailKeys.map((key) => (
          <div key={key} className="flex w-full items-center gap-2 px-4">
            {DetailIcons[key]}
            <div className="flex-1">
              <dt className="text-text-secondary text-sm">{DetailLabels[key]}</dt>
              <dd className="text-text-primary ml-1 text-base font-medium">
                {information[key] === '' ? '---' : information[key]}
              </dd>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};