import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';
import {
	Clock,
	Car,
	MapPin,
	Facebook,
	Instagram,
	Twitter,
	Linkedin,
	Youtube,
	Music,
	MessageSquare,
} from 'lucide-react';
import type {
	ReservationStatus,
	MessageStatus,
	ServiceType,
	SocialPlatform,
} from '../_type/type';
import { JSX } from 'react';

// ------------------------------
// Status Badge Component
// ------------------------------
export const StatusBadge = ({
	status,
}: {
	status: ReservationStatus | MessageStatus;
}) => {
	const variants: Record<ReservationStatus | MessageStatus, string> = {
		PENDING:
			'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
		NEW: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
		IN_PROGRESS:
			'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
		CONFIRMED:
			'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
		RESPONDED:
			'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
		COMPLETED:
			'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
		CANCELLED: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
		ARCHIVED: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
	};

	return (
		<Badge className={cn('font-medium', variants[status])}>{status}</Badge>
	);
};

// ------------------------------
// Service Type Badge
// ------------------------------
export const ServiceTypeBadge = ({ type }: { type: ServiceType }) => {
	const icons: Record<ServiceType, JSX.Element> = {
		HOURLY: <Clock className="h-3 w-3 mr-1" />,
		TRANSFER: <Car className="h-3 w-3 mr-1" />,
		FROM_AIRPORT: <MapPin className="h-3 w-3 mr-1" />,
		TO_AIRPORT: <MapPin className="h-3 w-3 mr-1" />,
	};

	const labels: Record<ServiceType, string> = {
		HOURLY: 'Hourly',
		TRANSFER: 'Transfer',
		FROM_AIRPORT: 'From Airport',
		TO_AIRPORT: 'To Airport',
	};

	return (
		<Badge variant="outline" className="flex items-center">
			{icons[type]}
			{labels[type]}
		</Badge>
	);
};

// ------------------------------
// Social Media Icon
// ------------------------------
export const SocialIcon = ({ platform }: { platform: SocialPlatform }) => {
	const icons: Record<SocialPlatform, JSX.Element> = {
		FACEBOOK: <Facebook className="h-4 w-4" />,
		INSTAGRAM: <Instagram className="h-4 w-4" />,
		TWITTER: <Twitter className="h-4 w-4" />,
		LINKEDIN: <Linkedin className="h-4 w-4" />,
		YOUTUBE: <Youtube className="h-4 w-4" />,
		TIKTOK: <Music className="h-4 w-4" />,
		WHATSAPP: <MessageSquare className="h-4 w-4" />,
	};

	return icons[platform] || null;
};