import type { ButtonProps } from "@/types/type";
import React from "react";
import { Text, TouchableOpacity } from "react-native";

const getBgVariantStyle = (variant: ButtonProps["bgVariant"]) => {
  switch (variant) {
    case "secondary":
      return "bg-gray-500";
    case "danger":
      return "bg-rose-500";
    case "success":
      return "bg-emerald-500";
    case "outline":
      return "bg-transparent border-neutral-300 dark:border-neutral-700 border-[0.5px]";
    default:
      return "bg-[#0286ff]";
  }
};

const getTextVariantStyle = (variant: ButtonProps["textVariant"]) => {
  switch (variant) {
    case "primary":
      return "text-black dark:text-white";
    case "secondary":
      return "text-gray-100";
    case "danger":
      return "text-rose-100";
    case "success":
      return "text-emerald-100";
    default:
      return "text-white";
  }
};

export const CustomButton = ({
  onPress,
  title,
  bgVariant = "primary",
  textVariant = "default",
  iconLeft: IconLeft,
  iconRight: IconRight,
  className,
  // Which touchable the button is built on. React Native's own works
  // everywhere except inside a @gorhom/bottom-sheet on Android, where the
  // sheet's gesture handler eats the first press — the button only fires on
  // the second tap. Screens hosted in a sheet pass the sheet's touchable.
  Touchable = TouchableOpacity,
  ...props
}: ButtonProps) => (
  <Touchable
    onPress={onPress}
    className={`w-full rounded-full p-3 flex flex-row justify-center items-center shadow-md shadow-neutral-400/70 dark:shadow-neutral-950/70 ${getBgVariantStyle(bgVariant)} ${className}`}
    {...props}
  >
    {IconLeft && <IconLeft />}

    <Text className={`text-lg font-bold ${getTextVariantStyle(textVariant)}`}>
      {title}
    </Text>

    {IconRight && <IconRight />}
  </Touchable>
);