import type { JSX } from "react";
import { useState } from "react";
import { Pressable, View } from "react-native";
import { Typography } from "heroui-native";
import type { Resolver } from "@/data/mock";
import { MonoText } from "@/components/MonoText";

interface ResolverCardProps {
  resolver: Resolver;
  isSelected: boolean;
  onSelect: () => void;
}

export function ResolverCard({ resolver, isSelected, onSelect }: ResolverCardProps): JSX.Element {
  const [isHovered, setIsHovered] = useState(false);

  const borderClass = isSelected ? "border-accent" : isHovered ? "border-border-secondary" : "border-border";
  const bgClass = isSelected ? "bg-accent/10" : "bg-surface-secondary";

  return (
    <Pressable
      onPress={onSelect}
      onHoverIn={() => setIsHovered(true)}
      onHoverOut={() => setIsHovered(false)}
      className={`mb-1.5 rounded-xl border p-3 ${borderClass} ${bgClass}`}
    >
      <View className="flex-row items-center justify-between">
        <Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
          {resolver.name}
        </Typography>
        <MonoText weight="semibold" className={isSelected ? "text-accent" : undefined}>
          {resolver.fee}
        </MonoText>
      </View>
      <Typography type="body-xs" color="muted" className="mt-0.5">
        {resolver.type} · {resolver.wins}% buyer-favorable
      </Typography>
    </Pressable>
  );
}