"use client"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"

import { Phone, MessageCircle, Instagram, Facebook } from "lucide-react"
import { IconInput } from "./components/IconInput"
import { useState } from "react"
import { useTranslations } from "next-intl"

interface AiAssistantItemProps {
  iconName?: string
  iconColor?: string
  placeholder?: string
  inputType?: string
}


export function AiAssistantItem(props: AiAssistantItemProps) {
  const { iconName, iconColor = "text-blue-900", placeholder = "Phone Number", inputType = "tel" } = props
  const [inputValue, setInputValue] = useState("")
  const t = useTranslations()
  const getIcon = (name?: string) => {
    switch (name) {
      case "Phone":
        return Phone
      case "MessageCircle":
        return MessageCircle
      case "Instagram":
        return Instagram
      case "Facebook":
        return Facebook
      default:
        return Phone
    }
  }
  const Icon = getIcon(iconName)
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
  }
  return (
    <Card className="flex-1 rounded-lg shadow-none p-0 overflow-hidden gap-3">
      <CardContent className="bg-gray-100 p-3 rounded-lg">
        <div className="w-full flex justify-between items-center space-y-3">
          <div className="flex items-center gap-2">
            <span className="bg-gray-200 p-2 rounded-lg">
              <Icon size={24} className={iconColor + " stroke-1"} />
            </span>
            <div>
              <h4 className="text-blue-900 text-[14px]">{placeholder}</h4>
              <Badge className="bg-gray-200 rounded-sm text-blue-900">{t("assistant.status.connected")}</Badge>
            </div>
          </div>
          <Switch
            checked={true}
            onCheckedChange={() => {}}
            onClick={e => e.stopPropagation()}
            className="w-6 h-4 **:data-[slot=switch-thumb]:size-3 data-[state=checked]:bg-sky-500"
          />
        </div>
        <div className="w-full flex gap-3">
          <div className="flex-1 bg-gray-200 p-3 rounded-md">
            <h4 className="text-blue-900 text-sm">{t("assistant.item.total")}</h4>
            <p className="text-blue-900 text-lg">1,247</p>
          </div>
          <div className="flex-1 bg-gray-200 p-3 rounded-md">
            <h4 className="text-blue-900 text-sm">{t("assistant.item.today")}</h4>
            <p className="text-blue-900 text-lg">47</p>
          </div>
        </div>
      </CardContent>
      <CardFooter className="pb-3 flex">
        <IconInput
          icon={Icon}
          iconColor={iconColor}
          className="w-full flex-1"
          value={inputValue}
          onChange={handleInputChange}
          placeholder={placeholder}
          type={inputType}
        />
      </CardFooter>
    </Card>
  )
}