import { FC } from "react";

interface IconOverdueProps {
    className?: string;
    fill?: boolean;
    duotone?: boolean;
}

const IconOverdue: FC<IconOverdueProps> = ({
    className,
    fill = false,
    duotone = true,
}) => {
    return (
        <>
            {!fill ? (
                // Outline clock (overdue concept)
                <svg
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className={className}
                >
                    <path
                        d="M12 8v5l3 2"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    />
                    <circle
                        cx="12"
                        cy="12"
                        r="9"
                        stroke="currentColor"
                        strokeWidth="1.5"
                    />
                    <path
                        d="M16 3v4h4"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    />
                </svg>
            ) : duotone ? (
                // Duotone clock
                <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className={className}
                >
                    <circle
                        cx="12"
                        cy="12"
                        r="9"
                        fill="currentColor"
                        opacity="0.15"
                    />
                    <path
                        d="M12 8v5l3 2"
                        stroke="currentColor"
                        strokeWidth="1.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    />
                    <circle
                        cx="12"
                        cy="12"
                        r="9"
                        stroke="currentColor"
                        strokeWidth="1.5"
                    />
                </svg>
            ) : (
                // Solid clock
                <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    xmlns="http://www.w3.org/2000/svg"
                    className={className}
                >
                    <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 10V7a1 1 0 10-2 0v6a1 1 0 00.4.8l3 2a1 1 0 101.2-1.6L13 12z" />
                </svg>
            )}
        </>
    );
};

export default IconOverdue;