type CampaignListSkeletonVariant = 'detail' | 'modal';

interface CampaignListSkeletonProps {
    rows?: number;
    variant?: CampaignListSkeletonVariant;
}

const DetailSkeletonRow = () => (
    <div className="flex items-center gap-3 p-3 border border-lightGray rounded-xl">
        <div className="w-5 h-5 bg-lightGray animate-pulse rounded shrink-0" />
        <div className="w-4 h-3 bg-lightGray animate-pulse rounded shrink-0" />
        <div className="w-10 h-10 rounded-lg bg-lightGray animate-pulse shrink-0" />
        <div className="flex-1 space-y-2 min-w-0">
            <div className="h-4 w-3/4 bg-lightGray animate-pulse rounded" />
            <div className="h-3 w-1/2 bg-lightGray animate-pulse rounded" />
        </div>
        <div className="h-5 w-14 bg-lightGray animate-pulse rounded shrink-0 hidden sm:block" />
        <div className="flex gap-1.5 shrink-0">
            <div className="w-4 h-4 bg-lightGray animate-pulse rounded-full" />
            <div className="w-4 h-4 bg-lightGray animate-pulse rounded-full" />
            <div className="w-4 h-4 bg-lightGray animate-pulse rounded-full" />
        </div>
        <div className="w-4 h-4 bg-lightGray animate-pulse rounded shrink-0" />
    </div>
);

const ModalSkeletonRow = () => (
    <div className="flex items-center gap-3 p-3 border border-lightGray rounded-xl">
        <div className="w-10 h-10 rounded-lg bg-lightGray animate-pulse shrink-0" />
        <div className="flex-1 space-y-2 min-w-0">
            <div className="h-4 w-3/4 bg-lightGray animate-pulse rounded" />
            <div className="h-3 w-1/2 bg-lightGray animate-pulse rounded" />
        </div>
    </div>
);

const CampaignListSkeleton = ({ rows = 5, variant = 'detail' }: CampaignListSkeletonProps) => {
    const Row = variant === 'modal' ? ModalSkeletonRow : DetailSkeletonRow;

    return (
        <div className="space-y-2">
            {Array.from({ length: rows }).map((_, i) => (
                <Row key={i} />
            ))}
        </div>
    );
};

export default CampaignListSkeleton;
