'use client';

import Image from 'next/image';
import { UserCircle, ShieldCheck, Building, Briefcase } from 'lucide-react';
import { cn } from '@/src/lib/admin/utils';  

type ProfileHeaderProps = {
  name: string;
  image: string | null;
  roleName?: string | null;
  status: number;
  className?: string;
};

export default function ProfileHeader({
  name,
  image,
  roleName,
  status,
  className,
}: ProfileHeaderProps) {
  const isActive = status === 1;
  const initials = name
    .split(' ')
    .map((n) => n[0])
    .join('')
    .slice(0, 2)
    .toUpperCase();

  return (
    <div className={cn('flex flex-col items-center gap-4', className)}>
      {/* Avatar */}
      <div className="relative">
        <div className="h-32 w-32 overflow-hidden rounded-full border-4 border-background shadow-xl">
          {image ? (
            <Image
              src={image}
              alt={name}
              width={128}
              height={128}
              className="h-full w-full object-cover"
              priority
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/10 to-primary/30 text-primary">
              <span className="text-4xl font-semibold">{initials}</span>
            </div>
          )}
        </div>

        {/* Status indicator */}
        <div
          className={cn(
            'absolute bottom-3 right-3 h-5 w-5 rounded-full border-2 border-background',
            isActive ? 'bg-green-500' : 'bg-red-500'
          )}
          title={isActive ? 'Active' : 'Inactive'}
        />
      </div>

      {/* Name & Role */}
      <div className="text-center">
        <h2 className="text-2xl font-bold tracking-tight">{name}</h2>

        {roleName && (
          <div className="mt-1.5 flex items-center justify-center gap-1.5 text-sm text-muted-foreground">
            {roleName.toLowerCase().includes('admin') ? (
              <ShieldCheck className="h-4 w-4 text-amber-600" />
            ) : roleName.toLowerCase().includes('manager') ||
              roleName.toLowerCase().includes('lead') ? (
              <Building className="h-4 w-4 text-blue-600" />
            ) : (
              <Briefcase className="h-4 w-4 text-gray-600" />
            )}
            <span>{roleName}</span>
          </div>
        )}
      </div>

      {/* Quick status badge */}
      <div className="flex items-center gap-2 rounded-full bg-muted px-4 py-1 text-xs font-medium">
        <div
          className={cn(
            'h-2 w-2 rounded-full',
            isActive ? 'bg-green-500' : 'bg-red-500'
          )}
        />
        <span>{isActive ? 'Active' : 'Inactive'}</span>
      </div>
    </div>
  );
}