"use client"

import { FC } from "react"
import { Card } from "@/components/ui/card"
import { IntegrationConfig, IntegrationMethod } from "@/app/(auth)/onboarding/types"

interface IntegrationCardProps {
  method: IntegrationMethod
  selectedIntegration: IntegrationMethod | null
  onSelect: (method: IntegrationMethod) => void
  config: IntegrationConfig
}

const IntegrationCard: FC<IntegrationCardProps> = ({
  method,
  selectedIntegration,
  onSelect,
  config,
}) => (
  <Card
    className={`flex-1 p-6 cursor-pointer transition-all ${
      selectedIntegration === method
        ? "border-primary ring-2 ring-primary/20"
        : "border-border hover:border-primary/50"
    }`}
    onClick={() => onSelect(method)}
  >
    <div className="flex flex-col items-center">
      <div
        className={`w-16 h-16 ${
          method === "github" ? "rounded-full" : "rounded-xl"
        } ${config.iconBg} flex items-center justify-center mb-3`}
      >
        {config.icon}
      </div>
      <span className="font-medium text-center text-foreground">{config.name}</span>
      <p className="text-muted-foreground text-sm text-center mt-2">{config.description}</p>
    </div>
  </Card>
)

export default IntegrationCard
