import React from "react";
import { View } from "react-native";
import { Button } from "~/components/ui/button";
import { Text } from "~/components/ui/text";
import { LucideChevronLeft } from "lucide-react-native";

interface PhonePinKeypadProps {
  onKeyPress: (value: string) => void;
  showDecimal?: boolean;
}

export const PhonePinKeypad: React.FC<PhonePinKeypadProps> = ({
  onKeyPress,
  showDecimal = false,
}) => {
  const keySizeClasses = "w-28 h-10 mx-2 my-2";
  const baseKeyClasses = `${keySizeClasses} bg-[#eee] items-center justify-center`;

  const renderNumberKey = (label: string) => (
    <Button
      key={label}
      className={baseKeyClasses}
      style={{ borderRadius: 10 }}
      onPress={() => onKeyPress(label)}
    >
      <Text className="text-2xl font-dmsans-bold text-black">{label}</Text>
    </Button>
  );

  return (
    <View className="w-full  items-center">
      {/* Row 1: 1, 2, 3 */}
      <View className="flex-row justify-center">
        {renderNumberKey("1")}
        {renderNumberKey("2")}
        {renderNumberKey("3")}
      </View>

      {/* Row 2: 4, 5, 6 */}
      <View className="flex-row justify-center">
        {renderNumberKey("4")}
        {renderNumberKey("5")}
        {renderNumberKey("6")}
      </View>

      {/* Row 3: 7, 8, 9 */}
      <View className="flex-row justify-center">
        {renderNumberKey("7")}
        {renderNumberKey("8")}
        {renderNumberKey("9")}
      </View>

      {/* Row 4: decimal/empty, 0, backspace */}
      <View className="flex-row justify-center">
        {showDecimal ? (
          <Button
            className={baseKeyClasses}
            style={{ borderRadius: 10 }}
            onPress={() => onKeyPress(".")}
          >
            <Text className="text-2xl font-dmsans-bold text-black">.</Text>
          </Button>
        ) : (
          <View className={keySizeClasses} style={{ borderRadius: 10 }} />
        )}

        <Button
          className={baseKeyClasses}
          style={{ borderRadius: 10 }}
          onPress={() => onKeyPress("0")}
        >
          <Text className="text-2xl font-dmsans-bold text-black">0</Text>
        </Button>

        <Button
          className={baseKeyClasses}
          style={{ borderRadius: 10 }}
          onPress={() => onKeyPress("backspace")}
          onLongPress={() => onKeyPress("clear")}
        >
          <LucideChevronLeft size={24} color="black" />
        </Button>
      </View>
    </View>
  );
};