import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export type ProfileStat = {
  label: string;
  value: string;
};

export type ProfileSummaryProps = {
  name: string;
  role?: string;
  status?: string;
  stats?: ProfileStat[];
};

export function ProfileSummary({
  name,
  role,
  status,
  stats = []
}: ProfileSummaryProps) {
  const initials = name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();

  return (
    <Card className="h-full">
      <CardHeader className="space-y-4">
        <div className="flex items-center gap-4">
          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary">
            {initials}
          </div>
          <div className="space-y-1">
            <CardTitle className="text-lg">{name}</CardTitle>
            {role ? <p className="text-sm text-muted-foreground">{role}</p> : null}
          </div>
          {status ? <Badge variant="secondary">{status}</Badge> : null}
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid gap-4 sm:grid-cols-3">
          {stats.map((stat) => (
            <div key={stat.label} className="space-y-1">
              <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                {stat.label}
              </p>
              <p className="text-lg font-semibold">{stat.value}</p>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}
Camila Soto
