import type { SVGProps } from "react";
import { Apple, Laptop, Smartphone, Tablet, Zap } from "lucide-react";

export type DeviceKind =
    | "macos" | "windows" | "linux" | "ios" | "shortcut" | "android" | "tablet" | "unknown";

const STROKE = 1.5;

export interface DeviceTypeIconProps extends SVGProps<SVGSVGElement>
{
    kind: DeviceKind;
    size?: number;
}

// 简笔线稿，1.5px stroke。默认走 currentColor，外层用 var(--text-muted)
// 或 var(--accent) 控制即可。Apple/Tablet 复用 lucide 的现成几何；
// Windows/Linux/Android 自绘以保持区分度。
export function DeviceTypeIcon(props: DeviceTypeIconProps)
{
    const { kind, size = 18, ...rest } = props;

    if (kind === "macos" || kind === "ios")
    {
        const Cmp = kind === "macos" ? Laptop : Apple;
        return <Cmp size={size} strokeWidth={STROKE} {...(rest as any)} />;
    }
    if (kind === "shortcut")
    {
        // iOS 快捷指令——非真实设备，用闪电（自动化/快捷动作的通用记号）区分。
        return <Zap size={size} strokeWidth={STROKE} {...(rest as any)} />;
    }
    if (kind === "android")
    {
        return (
            <svg
                width={size} height={size} viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth={STROKE}
                strokeLinecap="round" strokeLinejoin="round" {...rest}
            >
                <path d="M5 11a7 7 0 0 1 14 0v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" />
                <path d="M7 7l-2-3" />
                <path d="M17 7l2-3" />
                <circle cx="9" cy="11" r="0.6" fill="currentColor" />
                <circle cx="15" cy="11" r="0.6" fill="currentColor" />
            </svg>
        );
    }
    if (kind === "windows")
    {
        return (
            <svg
                width={size} height={size} viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth={STROKE}
                strokeLinecap="round" strokeLinejoin="round" {...rest}
            >
                <path d="M3 5l9-1v8H3z" />
                <path d="M12 4l9-1v10h-9z" />
                <path d="M3 13h9v8l-9-1z" />
                <path d="M12 13h9v9l-9-1z" />
            </svg>
        );
    }
    if (kind === "linux")
    {
        return (
            <svg
                width={size} height={size} viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth={STROKE}
                strokeLinecap="round" strokeLinejoin="round" {...rest}
            >
                <path d="M9 4c-1 2-1 4 0 6" />
                <path d="M15 4c1 2 1 4 0 6" />
                <path d="M7 12c0 4 2 8 5 8s5-4 5-8" />
                <path d="M7 12c-2 1-3 3-3 5" />
                <path d="M17 12c2 1 3 3 3 5" />
                <circle cx="10" cy="9" r="0.6" fill="currentColor" />
                <circle cx="14" cy="9" r="0.6" fill="currentColor" />
            </svg>
        );
    }
    if (kind === "tablet")
    {
        return <Tablet size={size} strokeWidth={STROKE} {...(rest as any)} />;
    }
    // unknown → 默认手机轮廓
    return <Smartphone size={size} strokeWidth={STROKE} {...(rest as any)} />;
}
