"use client";

import {
  Card,
  CardContent,
  CardHeader,
  Badge,
  Avatar,
  AvatarFallback,
  Separator,
} from "ikoncomponents";

interface EmployeeResponseDto {
  accountId: string;
  empId: string;
  name: string;
  email: string;
  organizationEmail: string;
  role: string;
  grade: string;
  active: boolean;
}

const EmployeeCard = ({
  empId,
  name,
  email,
  organizationEmail,
  role,
  grade,
  active,
}: EmployeeResponseDto) => {
  const initials = name
    ?.split(" ")
    .map((n: string) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2);

  return (
    <Card className="w-full shadow-md hover:shadow-lg transition-shadow duration-200">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Avatar className="h-12 w-12">
              <AvatarFallback className="bg-primary text-primary-foreground font-semibold text-sm">
                {initials}
              </AvatarFallback>
            </Avatar>
            <div>
              <p className="font-semibold text-base leading-tight">{name}</p>
              <p className="text-xs text-muted-foreground mt-0.5">{empId}</p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <Badge variant={active ? "default" : "secondary"}>
              {active ? "Active" : "Inactive"}
            </Badge>
          </div>
        </div>
      </CardHeader>

      <Separator />

      <CardContent className="pt-4 space-y-3">
        <div className="grid grid-cols-2 gap-3">
          <div>
            <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
              Role
            </p>
            <p className="text-sm font-medium mt-0.5">{role || "n/a"}</p>
          </div>
          <div>
            <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
              Grade
            </p>
            <p className="text-sm font-medium mt-0.5">{grade || "n/a"}</p>
          </div>
        </div>

        <Separator />

        <div className="space-y-2">
          <div>
            <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
              Personal Email
            </p>
            <p className="text-sm truncate mt-0.5">{email || "n/a"}</p>
          </div>
          <div>
            <p className="text-xs text-muted-foreground uppercase tracking-wide font-medium">
              Work Email
            </p>
            <p className="text-sm truncate mt-0.5">{organizationEmail || "n/a"}</p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default EmployeeCard;