import { JSX, SVGProps } from 'react';

type Props = SVGProps<SVGSVGElement>;

const baseStroke: Partial<Props> = {
    fill: 'none',
    stroke: 'currentColor',
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
};

export const Icon = {
    search: (p: Props) => (
        <svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.6} {...baseStroke} {...p}>
            <circle cx="7" cy="7" r="5" />
            <path d="m13.5 13.5-3-3" />
        </svg>
    ),
    play: (p: Props) => (
        <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" {...p}>
            <path d="M4 2.5v11l10-5.5z" />
        </svg>
    ),
    install: (p: Props) => (
        <svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={1.7} {...baseStroke} {...p}>
            <path d="M8 2v8" />
            <path d="m4.5 7 3.5 3.5L11.5 7" />
            <path d="M2.5 12.5h11" />
        </svg>
    ),
    download: (p: Props) => (
        <svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={1.7} {...baseStroke} {...p}>
            <path d="M8 2v8" />
            <path d="m4.5 7 3.5 3.5L11.5 7" />
            <path d="M2.5 13.5h11" />
        </svg>
    ),
    folder: (p: Props) => (
        <svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.5} {...baseStroke} {...p}>
            <path d="M1.75 3.75v8.5a1 1 0 0 0 1 1h10.5a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H7.5L6 2.75H2.75a1 1 0 0 0-1 1z" />
        </svg>
    ),
    kebab: (p: Props) => (
        <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" {...p}>
            <circle cx="8" cy="3.2" r="1.4" />
            <circle cx="8" cy="8" r="1.4" />
            <circle cx="8" cy="12.8" r="1.4" />
        </svg>
    ),
    sort: (p: Props) => (
        <svg viewBox="0 0 16 16" width="13" height="13" strokeWidth={1.6} {...baseStroke} {...p}>
            <path d="M3 4h10" />
            <path d="M4.5 8h7" />
            <path d="M6 12h4" />
        </svg>
    ),
    users: (p: Props) => (
        <svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={1.5} {...baseStroke} {...p}>
            <circle cx="6" cy="6" r="2.4" />
            <path d="M2 13c.6-2.2 2.2-3.4 4-3.4S9.4 10.8 10 13" />
            <circle cx="11.2" cy="5.4" r="1.8" />
            <path d="M10.4 9.8c1.7 0 3 1 3.6 2.6" />
        </svg>
    ),
    close: (p: Props) => (
        <svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.7} {...baseStroke} {...p}>
            <path d="m4 4 8 8M12 4l-8 8" />
        </svg>
    ),
    clearCircle: (p: Props) => (
        <svg viewBox="0 0 16 16" width="14" height="14" strokeWidth={1.7} {...baseStroke} {...p}>
            <circle cx="8" cy="8" r="5.5" />
            <path d="m6 6 4 4M10 6l-4 4" />
        </svg>
    ),
    check: (p: Props) => (
        <svg viewBox="0 0 16 16" width="12" height="12" strokeWidth={2} {...baseStroke} {...p}>
            <path d="m3 8 3.5 3.5L13 5" />
        </svg>
    ),
    chevron: (p: Props) => (
        <svg viewBox="0 0 16 16" width="11" height="11" strokeWidth={1.6} {...baseStroke} {...p}>
            <path d="m4 6 4 4 4-4" />
        </svg>
    ),
    trash: (p: Props) => (
        <svg viewBox="0 0 16 16" width="13" height="13" strokeWidth={1.5} {...baseStroke} {...p}>
            <path d="M3 4.5h10" />
            <path d="M5.5 4.5V3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v1.5" />
            <path d="M4.5 4.5 5 13a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1l.5-8.5" />
        </svg>
    ),
    games: (p: Props) => (
        <svg viewBox="0 0 16 16" width="22" height="22" strokeWidth={1.4} {...baseStroke} {...p}>
            <rect x="2" y="5" width="12" height="8" rx="2" />
            <path d="M5 9h2M6 8v2M10 9h.01M11 8h.01" />
        </svg>
    ),
} satisfies Record<string, (p: Props) => JSX.Element>;