import type { ComponentProps } from "react";
import { SvgIcon } from "@mui/material";

export function CommentIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M7 8h10M7 12h7M21 12c0 4.4-4 8-9 8-1.2 0-2.3-.2-3.3-.6L3 21l1.8-4.5C3.7 15.2 3 13.7 3 12c0-4.4 4-8 9-8s9 3.6 9 8Z" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
        </SvgIcon>
    );
}

export function SearchIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M11 19a8 8 0 1 1 5.7-2.4L21 21" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </SvgIcon>
    );
}

export function MoreVerticalIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M12 8h.01M12 12h.01M12 16h.01" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
        </SvgIcon>
    );
}

export function EditIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3Z" fill="currentColor" />
            <path d="M13.5 7.5l3 3" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        </SvgIcon>
    );
}

export function HistoryIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M3 12a9 9 0 1 0 3-6.7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
            <path d="M3 4v5h5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            <path d="M12 7v5l3 2" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </SvgIcon>
    );
}

export function ToggleIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M7 7h10a5 5 0 0 1 0 10H7A5 5 0 0 1 7 7Z" fill="currentColor" />
            <circle cx="8" cy="12" r="3" fill="white" />
        </SvgIcon>
    );
}

export function DeleteIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M4 7h16M10 11v6M14 11v6M6 7l1 14h10l1-14M9 7V4h6v3" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </SvgIcon>
    );
}

export function ChevronLeftIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M15 6L9 12L15 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </SvgIcon>
    );
}

export function ChevronRightIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M9 6L15 12L9 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </SvgIcon>
    );
}

export function PlusIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        </SvgIcon>
    );
}

export function CloseIcon(props: ComponentProps<typeof SvgIcon>) {
    return (
        <SvgIcon {...props}>
            <path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        </SvgIcon>
    );
}