import { Image, Text, TouchableOpacity, View } from "react-native";

import { icons } from "@/constants";
import { tr } from "@/lib/i18n";
import { formatTime } from "@/lib/utils";
import { DriverCardProps } from "@/types/type";

export const DriverCard = ({
  item,
  selected,
  setSelected,
}: DriverCardProps) => {
  return (
    <TouchableOpacity
      onPress={setSelected}
      className={`${
        selected === item.id
          ? "bg-general-600 dark:bg-primary-500/20"
          : "bg-white dark:bg-neutral-900"
      } flex flex-row items-center justify-between py-5 px-3 rounded-xl`}
    >
      <Image
        source={{ uri: item.profile_image_url }}
        alt={tr("components.driverCard.avatarAlt")}
        className="w-14 h-14 rounded-full"
      />

      <View className="flex-1 flex flex-col items-start justify-center mx-3">
        <View className="flex flex-row items-center justify-start mb-1">
          <Text className="text-lg font-JakartaRegular text-black dark:text-white">
            {item.title ?? `${item.first_name} ${item.last_name}`}
          </Text>

          <View className="flex flex-row items-center space-x-1 ml-2">
            <Image source={icons.star} alt={tr("components.driverCard.starAlt")} className="w-3.5 h-3.5" />
            <Text className="text-sm font-JakartaRegular text-black dark:text-white">{item.rating}</Text>
          </View>
        </View>

        <View className="flex flex-row items-center justify-start">
          <View className="flex flex-row items-center">
            <Image source={icons.dollar} alt={tr("components.driverCard.dollarAlt")} className="w-4 h-4" />
            <Text className="text-sm font-JakartaRegular ml-1 text-black dark:text-white">
              ${item.price}
            </Text>
          </View>

          <Text className="text-sm font-JakartaRegular text-general-800 dark:text-neutral-400 mx-1">
            |
          </Text>

          <Text className="text-sm font-JakartaRegular text-general-800 dark:text-neutral-400">
            {formatTime(parseInt(`${item.time}`))}
          </Text>

          <Text className="text-sm font-JakartaRegular text-general-800 dark:text-neutral-400 mx-1">
            |
          </Text>

          <Text className="text-sm font-JakartaRegular text-general-800 dark:text-neutral-400">
            {tr("components.driverCard.seats", {}, item.car_seats)}
          </Text>
        </View>
      </View>

      <Image
        source={{ uri: item.car_image_url }}
        alt={tr("components.driverCard.carAlt")}
        className="h-14 w-14"
        resizeMode="contain"
      />
    </TouchableOpacity>
  );
};