"use client";

import React from "react";
import { X } from "lucide-react";

import { formatIsoDateRangeLabelDe } from "@/lib/frontend/search/dateRange";

import { Badge } from "@/components/ui/badge";

export default function SearchDateFilterChip({
	from,
	to,
	onClear,
	isSubmitting,
}) {
	const label = formatIsoDateRangeLabelDe({ from, to });
	if (!label) return null;

	const canClear = typeof onClear === "function" && !isSubmitting;

	return (
		<Badge className="gap-1">
			<span>{label}</span>

			<button
				type="button"
				className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-muted/60 disabled:opacity-60 cursor-pointer"
				onClick={() => {
					if (!canClear) return;
					onClear();
				}}
				disabled={!canClear}
				aria-label="Zeitraum entfernen"
				title="Zeitraum entfernen"
			>
				<X className="h-3 w-3" />
			</button>
		</Badge>
	);
}
