import { FiPlay, FiCheckCircle, FiPause } from 'react-icons/fi';

export interface AgentStatusProps {
	status: 'active' | 'completed' | 'paused';
	showLabel?: boolean;
	showIcon?: boolean;
	size?: 'sm' | 'md' | 'lg';
	className?: string;
}

const statusConfig = {
	active: {
		icon: FiPlay,
		label: 'Active',
		color: 'text-blue-500',
		bgColor: 'bg-blue-100',
	},
	completed: {
		icon: FiCheckCircle,
		label: 'Completed',
		color: 'text-green-500',
		bgColor: 'bg-green-100',
	},
	paused: {
		icon: FiPause,
		label: 'Paused',
		color: 'text-yellow-500',
		bgColor: 'bg-yellow-100',
	},
};

const sizeConfig = {
	sm: {
		icon: 12,
		text: 'text-xs',
		padding: 'px-2 py-1',
	},
	md: {
		icon: 16,
		text: 'text-sm',
		padding: 'px-3 py-1.5',
	},
	lg: {
		icon: 20,
		text: 'text-base',
		padding: 'px-4 py-2',
	},
};

export function AgentStatus({
	status,
	showLabel = true,
	showIcon = true,
	size = 'md',
	className = '',
}: AgentStatusProps) {
	const config = statusConfig[status];
	const sizeStyle = sizeConfig[size];
	const Icon = config.icon;

	return (
		<div
			className={`inline-flex items-center gap-2 ${sizeStyle.padding} ${config.bgColor} rounded-full ${className}`}
			role='status'
			aria-label={`Agent status: ${config.label}`}
		>
			{showIcon && <Icon className={config.color} size={sizeStyle.icon} />}
			{showLabel && <span className={`${sizeStyle.text} ${config.color} font-medium`}>{config.label}</span>}
		</div>
	);
}