import { Button } from "../ui";
import { CrossContigo, Telephone, Ubication } from "../ui/icons";
import { Datos } from "./types";
import { cn } from "@/lib/utils";

interface Props {
  element: Datos;
  handleClick: (content: string[]) => void;
}

export const ResultsItem = ({ element, handleClick }: Props) => {
  const divClass = "flex-1 flex gap-3 px-2 items-center px-4";

  const especialidades = element.especialidades.map((s) => s.especialidad);

  return (
    <div className="flex items-center justify-between py-7">
      <div className={cn(divClass, "font-medium text-xl")}>
        <CrossContigo className="w-4 h-5 text-contigo-verde" />
        <div className="flex-1">{element.prestador}</div>
      </div>
      <div className={cn(divClass, "")}>
        <Telephone className="w-4 h-5 text-contigo-verde" />
        <div className="flex-1">{element.telefono}</div>
      </div>
      <div className={cn(divClass, "")}>
        <Ubication className="w-4 h-5 text-contigo-verde" />
        <div className="flex-1">{element.domicilio}</div>
      </div>
      <Button className="max-w-fit whitespace-nowrap" onClick={() => handleClick(especialidades)}>
        Ver especialidades
      </Button>
    </div>
  );
};