/**
 * RequestInitiatorCard Component
 * Displays initiator/requester details - can be used for both claim management and regular workflows
 */

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Mail, Phone } from 'lucide-react';

interface InitiatorInfo {
  name: string;
  role?: string;
  department?: string;
  email: string;
  phone?: string;
}

interface RequestInitiatorCardProps {
  initiatorInfo: InitiatorInfo;
  className?: string;
}

export function RequestInitiatorCard({ initiatorInfo, className }: RequestInitiatorCardProps) {
  // Generate initials from name
  const getInitials = (name: string) => {
    return name
      .split(' ')
      .map((n) => n[0])
      .join('')
      .toUpperCase()
      .slice(0, 2);
  };

  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle className="text-base">Request Initiator</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-start gap-4">
          <Avatar className="h-14 w-14 ring-2 ring-white shadow-md">
            <AvatarFallback className="bg-gray-700 text-white font-semibold text-lg">
              {getInitials(initiatorInfo.name)}
            </AvatarFallback>
          </Avatar>
          <div className="flex-1">
            <h3 className="font-semibold text-gray-900">{initiatorInfo.name}</h3>
            {initiatorInfo.role && (
              <p className="text-sm text-gray-600">{initiatorInfo.role}</p>
            )}
            {initiatorInfo.department && (
              <p className="text-sm text-gray-500">{initiatorInfo.department}</p>
            )}
            
            <div className="mt-3 space-y-2">
              {/* Email */}
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <Mail className="w-4 h-4" />
                <span>{initiatorInfo.email}</span>
              </div>

              {/* Phone */}
              {initiatorInfo.phone && (
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <Phone className="w-4 h-4" />
                  <span>{initiatorInfo.phone}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}