import { format, parseISO } from "date-fns";
import { Badge } from "@/components/ui/badge";
import {
	formatRecurrenceText,
	getRecurrencePreview,
	parseRecurrenceRule,
} from "@/lib/recurrence";

interface RRuleDisplayProps {
	rrule?: string;
	className?: string;
	start?: string;
}

export function RRuleDisplay({ rrule, className, start }: RRuleDisplayProps) {
	if (!rrule) return null;

	const humanText = formatRecurrenceText(rrule);
	const preview = start
		? getRecurrencePreview(parseRecurrenceRule(rrule), start, 3)
		: [];

	return (
		<div className={className}>
			<div className="flex flex-wrap items-center gap-1.5">
				<Badge
					variant="secondary"
					className="h-5 text-[10px] font-normal capitalize"
				>
					{humanText ?? rrule}
				</Badge>
				{preview.length > 0 && (
					<Badge variant="outline" className="h-5 text-[10px] font-normal">
						Next:{" "}
						{preview
							.map((value) => format(parseISO(value), "MMM d"))
							.join(", ")}
					</Badge>
				)}
			</div>
		</div>
	);
}
