import {
  LucideChevronRightCircle,
  LucideSend,
  LucideUploadCloud,
  LucideCreditCard,
} from "lucide-react-native";
import React from "react";
import { View, Text, Image } from "react-native";
import { Button } from "~/components/ui/button";
import { useTranslation } from "react-i18next";

interface AccountCardProps {
  cardType?: string;
  cardNumber?: string;
  expiryDate?: string;
  onPress?: () => void;
  selected?: boolean;
}

export default function AccountCard({
  cardType,
  cardNumber,
  expiryDate,
  onPress,
  selected = false,
}: AccountCardProps) {
  const { t } = useTranslation();

  const resolvedCardType = cardType || t("components.acccard.cardTypeFallback");
  const resolvedCardNumber =
    cardNumber || t("components.acccard.cardNumberPlaceholder");
  const resolvedExpiryDate =
    expiryDate || t("components.acccard.expiryPlaceholder");

  const getCardColor = (type: string) => {
    switch (type?.toLowerCase()) {
      case "visa":
        return "bg-blue-50";
      case "mastercard":
        return "bg-red-50";
      case "american express":
        return "bg-green-50";
      case "discover":
        return "bg-orange-50";
      default:
        return "bg-gray-50";
    }
  };

  return (
    <View
      className={`flex flex-row w-full justify-between items-center py-4 ${getCardColor(
        resolvedCardType
      )} rounded-md px-3 ${
        selected ? "border-2 border-primary" : "border border-gray-200"
      }`}
    >
      <View className="flex flex-row space-x-2 items-center">
        <View className="bg-secondary p-2 rounded">
          <LucideCreditCard className="text-white rounded" size={20} />
        </View>
        <View className="w-4" />
        <View className="flex space-y-1">
          <Text className="font-dmsans text-primary">{resolvedCardType}</Text>
          <Text className="font-dmsans-medium text-secondary text-sm">
            {resolvedCardNumber}
          </Text>
          <Text className="font-dmsans-medium text-gray-500 text-xs">
            {t("components.acccard.expiryLabel", { date: resolvedExpiryDate })}
          </Text>
        </View>
      </View>

      <View className="flex space-y-1 pl-6">
        <Button
          className={`${getCardColor(resolvedCardType)} rounded-md`}
          onPress={onPress}
        >
          <LucideChevronRightCircle className="text-secondary text-base" />
        </Button>
      </View>
    </View>
  );
}