/* eslint-disable react/react-in-jsx-scope */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
interface DataScheduling {
  nombre: string
  correo: string
  telefono: string
  identificacion: string
  ciudad: string
  sede: string
  tipo_vehiculo: string
  placa: string
  fecha_agendamiento: string
  hora: string
}

const sedes = [
  { name: 'CDA DISTRITAL', value: '1' },
  { name: 'PREVICAR CR30', value: '2' },
  { name: 'PREVICAR 197', value: '3' },
  { name: 'CDA CALI NORTE', value: '5' },
  { name: 'CDA CALI SUR', value: '4' }
]

const typeOfVehicles = [
  { name: 'livianos', value: '1' },
  { name: 'pesados', value: '2' },
  { name: 'motos', value: '3' }

]
export default function TableScheduling ({ dataScheduling }: { dataScheduling: DataScheduling }) {
  const formatSede = sedes.find((option: any) => option.value === dataScheduling.sede)

  const formatTypeOfVehicle = typeOfVehicles.find((option: any) => option.value === dataScheduling.tipo_vehiculo)

  const rows = [
    { label: 'Nombre', value: dataScheduling.nombre },
    { label: 'Email', value: dataScheduling.correo },
    { label: 'Celular', value: dataScheduling.telefono },
    { label: 'Identificación del propietario', value: dataScheduling.identificacion },
    { label: 'Ciudad', value: dataScheduling.ciudad },
    { label: 'Sede', value: formatSede?.name },
    { label: 'Tipo de vehículo', value: formatTypeOfVehicle?.name },
    { label: 'Placa del Vehículo', value: dataScheduling.placa },
    { label: 'Fecha de agendamiento', value: dataScheduling.fecha_agendamiento },
    { label: 'Hora', value: dataScheduling.hora }
  ]

  return (
      <div className="w-full max-w-2xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
        <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
          <h2 className="text-xl font-semibold text-gray-800">Detalles de Agendamiento</h2>
        </div>
        <div className="p-6">
          <table className="w-full">
            <tbody>
              {rows.map((row, index) => (
                <tr key={row.label} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
                  <td className="py-3 px-4 text-sm font-medium text-gray-700">{row.label}</td>
                  <td className="py-3 px-4 text-sm text-gray-900">{row.value}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
  )
}