src/components/asset-request/RequestStatusBadge.tsx

import React from 'react';
import { Badge } from '@/components/ui/badge';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Clock, CheckCircle, XCircle, Package } from 'lucide-react';
import { RequestStatus, REQUEST_STATUS_LABELS } from '@/types/asset-request';
import { cn } from '@/lib/utils';

interface RequestStatusBadgeProps {
  status: RequestStatus;
  className?: string;
  showTooltip?: boolean;
}

/**
 * Status badge component with color coding and icons for asset request statuses
 * Displays status with appropriate color, icon, and optional tooltip
 */
const RequestStatusBadge: React.FC<RequestStatusBadgeProps> = ({
  status,
  className,
  showTooltip = true,
}) => {
  // Get icon for status
  const getStatusIcon = () => {
    switch (status) {
      case 'pending':
        return <Clock className="h-3.5 w-3.5" aria-hidden="true" />;
      case 'approved':
        return <CheckCircle className="h-3.5 w-3.5" aria-hidden="true" />;
      case 'rejected':
        return <XCircle className="h-3.5 w-3.5" aria-hidden="true" />;
      case 'assigned':
        return <Package className="h-3.5 w-3.5" aria-hidden="true" />;
    }
  };

  // Get color variant for status
  const getStatusVariant = () => {
    switch (status) {
      case 'pending':
        return 'default'; // Yellow/warning color
      case 'approved':
        return 'success'; // Green color
      case 'rejected':
        return 'destructive'; // Red color
      case 'assigned':
        return 'secondary'; // Blue/info color
    }
  };

  // Get tooltip description for status
  const getStatusDescription = () => {
    switch (status) {
      case 'pending':
        return 'This request is awaiting administrator review';
      case 'approved':
        return 'This request has been approved and is ready for asset assignment';
      case 'rejected':
        return 'This request has been rejected by an administrator';
      case 'assigned':
        return 'Assets have been assigned and delivered for this request';
    }
  };

  const badgeContent = (
    <Badge
      variant={getStatusVariant()}
      className={cn('flex items-center gap-1.5', className)}
      aria-label={`Request status: ${REQUEST_STATUS_LABELS[status]}`}
    >
      {getStatusIcon()}
      <span>{REQUEST_STATUS_LABELS[status]}</span>
    </Badge>
  );

  if (!showTooltip) {
    return badgeContent;
  }

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          {badgeContent}
        </TooltipTrigger>
        <TooltipContent>
          <p>{getStatusDescription()}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

export default RequestStatusBadge;