mancala/apps/frontend/src/components/Icons.tsx

import * as React from "react";

// Inline stroke icons in the current text colour. All are decorative; buttons carry their own labels.

type IconProps = { size?: number, className?: string };

const stroke = (size: number, width: number, className?: string) => ({
    width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: width,
    strokeLinecap: "round" as const, strokeLinejoin: "round" as const, className, "aria-hidden": true,
});

export const LogoIcon = ({ size = 34 }: IconProps) => (
    <svg width={size} height={size} viewBox="0 0 32 32" aria-hidden="true">
        <rect x="1" y="1" width="30" height="30" rx="9" style={{ fill: "var(--accent)" }} />
        <rect x="6" y="7" width="6" height="18" rx="3" style={{ fill: "var(--onAccent)" }} />
        <circle cx="18" cy="11" r="3.2" style={{ fill: "var(--onAccent)" }} />
        <circle cx="18" cy="21" r="3.2" style={{ fill: "var(--onAccent)" }} />
        <circle cx="25" cy="11" r="3.2" style={{ fill: "var(--onAccent)", opacity: .55 }} />
        <circle cx="25" cy="21" r="3.2" style={{ fill: "var(--onAccent)" }} />
    </svg>
);

export const PlusIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2.4)}><path d="M12 5v14M5 12h14" /></svg>
);

export const ProfileIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2)}><circle cx="12" cy="8" r="4" /><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" /></svg>
);

export const LeaveIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2)}><path d="M14 4h5v16h-5" /><path d="M10 8l-4 4 4 4" /><path d="M6 12h10" /></svg>
);

export const ChevronIcon = ({ size = 20, className }: IconProps) => (
    <svg {...stroke(size, 2.2, className)}><path d="M6 9l6 6 6-6" /></svg>
);

export const CloseIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2.2)}><path d="M6 6l12 12M18 6L6 18" /></svg>
);

export const ReplayIcon = ({ size = 18 }: IconProps) => (
    <svg {...stroke(size, 2.2)}><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" /></svg>
);

export const FirstIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2.2)}><path d="M6 5v14" /><path d="M18 6l-8 6 8 6z" /></svg>
);

export const PreviousIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2.4)}><path d="M15 6l-6 6 6 6" /></svg>
);

export const NextIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2.4)}><path d="M9 6l6 6-6 6" /></svg>
);

export const LastIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2.2)}><path d="M18 5v14" /><path d="M6 6l8 6-8 6z" /></svg>
);

export const PlayIcon = ({ size = 22 }: IconProps) => (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5l11 7-11 7z" fill="currentColor" /></svg>
);

export const PauseIcon = ({ size = 22 }: IconProps) => (
    <svg {...stroke(size, 3)}><path d="M8 5v14M16 5v14" /></svg>
);

export const BotIcon = ({ size = 20 }: IconProps) => (
    <svg {...stroke(size, 2)}><rect x="4" y="8" width="16" height="12" rx="4" /><path d="M12 4v4" /><circle cx="12" cy="3.5" r="1" /><path d="M9 13v2M15 13v2" /></svg>
);