"use client"

import { CheckCircle } from "lucide-react"
import { Card, CardContent } from "@/components/ui/card"
import { cn } from "@/lib/utils"
import { Icons } from "./icons"

interface ModelCardProps {
  model: "openai" | "qwen" | "googleNanoBanana"
  useCase: string
  isSelected: boolean
  onClick: () => void
}

export function ModelCard({
  model,
  useCase,
  isSelected,
  onClick,
}: ModelCardProps) {
  const modelDetails = {
    openai: { name: "OpenAI", icon: Icons.openai },
    qwen: { name: "Qwen", icon: Icons.qwen },
    googleNanoBanana: { name: "Google", icon: Icons.google },
  }

  const { name, icon: Icon } = modelDetails[model]

  return (
    <Card
      className={cn(
        "cursor-pointer transition-all hover:shadow-md",
        isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-background"
      )}
      onClick={onClick}
    >
      <CardContent className="relative flex flex-col items-center justify-center gap-2 p-3">
        {isSelected && (
          <CheckCircle className="absolute right-1 top-1 h-4 w-4 text-primary" />
        )}
        <Icon className="h-6 w-6" />
        <p className="text-sm font-medium">{name}</p>
        <p className="text-xs text-muted-foreground">{useCase}</p>
      </CardContent>
    </Card>
  )
}