"use client"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Users, Plus } from "lucide-react"
import { useTranslations } from "next-intl"

interface StaffEmptyStateProps {
  filter: "all" | "active" | "offDuty"
  onAddStaff?: () => void
}

export function StaffEmptyState({ filter, onAddStaff }: StaffEmptyStateProps) {
  const t = useTranslations()

  const getEmptyStateContent = () => {
    switch (filter) {
      case "active":
        return {
          title: t("staff.empty.noActiveStaff"),
          description: t("staff.empty.noActiveStaffDescription"),
          actionText: t("staff.empty.viewAllStaff")
        }
      case "offDuty":
        return {
          title: t("staff.empty.noOffDutyStaff"),
          description: t("staff.empty.noOffDutyStaffDescription"),
          actionText: t("staff.empty.viewAllStaff")
        }
      case "all":
      default:
        return {
          title: t("staff.empty.noStaff"),
          description: t("staff.empty.noStaffDescription"),
          actionText: t("staff.addStaff")
        }
    }
  }

  const { title, description, actionText } = getEmptyStateContent()

  return (
    <Card className="w-full bg-white rounded-sm shadow-sm">
      <CardContent className="px-6 py-12">
        <div className="text-center">
          {/* Icon */}
          <div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
            <Users className="w-8 h-8 text-gray-400" />
          </div>

          {/* Title */}
          <h3 className="text-lg font-semibold text-gray-900 mb-2">{title}</h3>

          {/* Description */}
          <p className="text-gray-500 mb-6 max-w-md mx-auto">{description}</p>

          {/* Action Button */}
          {/* <Button
            onClick={onAddStaff}
            className="bg-primary-gradient text-white hover:opacity-90 transition-opacity"
          >
            <Plus className="w-4 h-4 mr-2" />
            {actionText}
          </Button> */}
        </div>
      </CardContent>
    </Card>
  )
}