import type { FC, SVGProps } from 'react';

export const Logo: FC<{ size?: number; accent?: string }> = ({
    size = 32,
    accent = '#22D3EE',
}) => (
    <svg width={size} height={size} viewBox="0 0 72 72">
        <rect x="6" y="6" width="60" height="60" rx="14" fill="#312E81" />
        <circle cx="22" cy="22" r="3.5" fill="white" />
        <circle cx="36" cy="22" r="3.5" fill="white" opacity="0.4" />
        <circle cx="50" cy="22" r="3.5" fill="white" />
        <circle cx="22" cy="36" r="3.5" fill="white" opacity="0.4" />
        <circle cx="36" cy="36" r="5" fill={accent} />
        <circle cx="50" cy="36" r="3.5" fill="white" />
        <circle cx="22" cy="50" r="3.5" fill="white" />
        <circle cx="36" cy="50" r="3.5" fill="white" opacity="0.4" />
        <circle cx="50" cy="50" r="3.5" fill="white" />
    </svg>
);

export const ArrowRightIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} {...props}>
        <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
);

export const ProductIcon: FC<{ name: string; size?: number }> = ({
    name,
    size = 24,
}) => {
    const common = {
        width: size,
        height: size,
        viewBox: '0 0 24 24',
        fill: 'none',
        stroke: 'currentColor',
        strokeWidth: 2,
    };
    switch (name) {
        case 'agroto':
            return (
                <svg {...common}>
                    <path d="M12 2L2 7l10 5 10-5-10-5z" />
                    <path d="M2 17l10 5 10-5" />
                    <path d="M2 12l10 5 10-5" />
                </svg>
            );
        // Бонитировка — оценочный лист с галочками: планшет с отметками.
        case 'bonitirovka':
            return (
                <svg {...common}>
                    <rect x="4" y="3" width="16" height="18" rx="2" />
                    <path d="M9 3h6v3H9z" />
                    <path d="M8 11l1.6 1.6L13 9" />
                    <path d="M8 16.5h8" />
                </svg>
            );
        case 'smart-home':
            return (
                <svg {...common}>
                    <path d="M3 12l9-9 9 9v9a2 2 0 01-2 2h-4v-7H10v7H6a2 2 0 01-2-2z" />
                </svg>
            );
        default:
            return (
                <svg {...common}>
                    <rect x="3" y="3" width="18" height="18" rx="3" />
                </svg>
            );
    }
};

export const ApproachIcon: FC<{ name: string; size?: number }> = ({
    name,
    size = 18,
}) => {
    const common = {
        width: size,
        height: size,
        viewBox: '0 0 24 24',
        fill: 'none',
        stroke: 'currentColor',
        strokeWidth: 2.5,
    };
    switch (name) {
        case 'clock':
            return (
                <svg {...common}>
                    <circle cx="12" cy="12" r="9" />
                    <path d="M12 7v5l3 3" />
                </svg>
            );
        case 'sparkle':
            return (
                <svg {...common}>
                    <circle cx="12" cy="12" r="3" />
                    <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
                </svg>
            );
        case 'grid':
            return (
                <svg {...common}>
                    <path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z" />
                </svg>
            );
        default:
            return null;
    }
};