import {
  LucideChevronRight,
  LucideCreditCard,
  LucideSend,
} 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";

export default function CardComp() {
  const { t } = useTranslation();

  return (
    <View className="flex flex-row justify-between w-full items-center py-4 bg-green-50 rounded-md px-3">
      <View className="flex flex-row space-x-2 items-center">
        <View className=" bg-secondary p-2 rounded ">
          <LucideCreditCard className="text-white rounded" />
        </View>
        <View className="flex space-y-1">
          <Text className="font-dmsans text-primary ">
            {t("components.cardcomp.title")}
          </Text>
          <Text className="font-dmsans-medium  text-secondary">
            {t("components.cardcomp.number")}
          </Text>
        </View>
      </View>

      <View className="flex space-y-1">
        <Button className="bg-green-50 rounded-md">
          <LucideChevronRight className="text-secondary text-base" />
        </Button>
      </View>
    </View>
  );
}