// ── Icon Library – stroke-basierte SVG Icons ──────────────────────────────────
// Verwendung: <Icon name="home" size={20} color="#4ecdc4" />
// Oder direkt: <HomeIcon size={20} color="#fff" />

const base = (path, size, color, sw = 1.75) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
    {path}
  </svg>
);

export const HomeIcon     = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9.5z"/>
  <path d="M9 21V12h6v9"/>
</>, size, color, sw);

export const AppsIcon     = ({size=20,color='currentColor',sw}) => base(<>
  <rect x="3" y="3" width="7" height="7" rx="1"/>
  <rect x="14" y="3" width="7" height="7" rx="1"/>
  <rect x="3" y="14" width="7" height="7" rx="1"/>
  <rect x="14" y="14" width="7" height="7" rx="1"/>
</>, size, color, sw);

export const CalculatorIcon = ({size=20,color='currentColor',sw}) => base(<>
  <rect x="4" y="2" width="16" height="20" rx="2"/>
  <line x1="8" y1="7" x2="16" y2="7"/>
  <line x1="8" y1="12" x2="10" y2="12"/>
  <line x1="14" y1="12" x2="16" y2="12"/>
  <line x1="8" y1="17" x2="10" y2="17"/>
  <line x1="14" y1="17" x2="16" y2="17"/>
</>, size, color, sw);

export const ArchiveIcon  = ({size=20,color='currentColor',sw}) => base(<>
  <rect x="2" y="3" width="20" height="4" rx="1"/>
  <path d="M4 7v13a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7"/>
  <line x1="9" y1="12" x2="15" y2="12"/>
</>, size, color, sw);

export const AdminIcon    = ({size=20,color='currentColor',sw}) => base(<>
  <circle cx="12" cy="12" r="3"/>
  <path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</>, size, color, sw);

export const MoreIcon     = ({size=20,color='currentColor',sw}) => base(<>
  <circle cx="5" cy="12" r="1.2" fill={color}/>
  <circle cx="12" cy="12" r="1.2" fill={color}/>
  <circle cx="19" cy="12" r="1.2" fill={color}/>
</>, size, color, sw);

export const UserIcon     = ({size=20,color='currentColor',sw}) => base(<>
  <circle cx="12" cy="8" r="4"/>
  <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
</>, size, color, sw);

export const LogOutIcon   = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
  <polyline points="16 17 21 12 16 7"/>
  <line x1="21" y1="12" x2="9" y2="12"/>
</>, size, color, sw);

export const SearchIcon   = ({size=20,color='currentColor',sw}) => base(<>
  <circle cx="11" cy="11" r="7"/>
  <line x1="21" y1="21" x2="16.65" y2="16.65"/>
</>, size, color, sw);

export const PlusIcon     = ({size=20,color='currentColor',sw}) => base(<>
  <line x1="12" y1="5" x2="12" y2="19"/>
  <line x1="5" y1="12" x2="19" y2="12"/>
</>, size, color, sw);

export const XIcon        = ({size=20,color='currentColor',sw}) => base(<>
  <line x1="18" y1="6" x2="6" y2="18"/>
  <line x1="6" y1="6" x2="18" y2="18"/>
</>, size, color, sw);

export const CheckIcon    = ({size=20,color='currentColor',sw}) => base(<>
  <polyline points="20 6 9 17 4 12"/>
</>, size, color, sw);

export const EditIcon     = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
</>, size, color, sw);

export const TrashIcon    = ({size=20,color='currentColor',sw}) => base(<>
  <polyline points="3 6 5 6 21 6"/>
  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
  <path d="M10 11v6M14 11v6"/>
  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
</>, size, color, sw);

export const DownloadIcon = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <polyline points="7 10 12 15 17 10"/>
  <line x1="12" y1="15" x2="12" y2="3"/>
</>, size, color, sw);

export const UploadIcon   = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
  <polyline points="17 8 12 3 7 8"/>
  <line x1="12" y1="3" x2="12" y2="15"/>
</>, size, color, sw);

export const UpdateIcon   = ({size=20,color='currentColor',sw}) => base(<>
  <circle cx="12" cy="12" r="9"/>
  <line x1="12" y1="8" x2="12" y2="12"/>
  <line x1="12" y1="16" x2="12.01" y2="16"/>
</>, size, color, sw);

export const ChevronIcon  = ({size=20,color='currentColor',sw,dir='right'}) => base(<>
  {dir==='right' && <polyline points="9 18 15 12 9 6"/>}
  {dir==='down'  && <polyline points="6 9 12 15 18 9"/>}
  {dir==='left'  && <polyline points="15 18 9 12 15 6"/>}
  {dir==='up'    && <polyline points="18 15 12 9 6 15"/>}
</>, size, color, sw);

export const CameraIcon   = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
  <circle cx="12" cy="13" r="4"/>
</>, size, color, sw);

export const KeyIcon      = ({size=20,color='currentColor',sw}) => base(<>
  <circle cx="8" cy="12" r="5"/>
  <path d="M13 12h8M17 10v4"/>
</>, size, color, sw);

export const DatabaseIcon = ({size=20,color='currentColor',sw}) => base(<>
  <ellipse cx="12" cy="5" rx="9" ry="3"/>
  <path d="M3 5v4c0 1.66 4.03 3 9 3s9-1.34 9-3V5"/>
  <path d="M3 9v4c0 1.66 4.03 3 9 3s9-1.34 9-3V9"/>
  <path d="M3 13v4c0 1.66 4.03 3 9 3s9-1.34 9-3v-4"/>
</>, size, color, sw);

export const ZapIcon      = ({size=20,color='currentColor',sw}) => base(<>
  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
</>, size, color, sw);
export const MessageIcon  = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke={color} strokeWidth={sw||1.5} fill="none" strokeLinejoin="round" strokeLinecap="round"/>
</>, size, color, sw);
export const LinkIcon     = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke={color} strokeWidth={sw||1.5} fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke={color} strokeWidth={sw||1.5} fill="none" strokeLinecap="round" strokeLinejoin="round"/>
</>, size, color, sw);
export const CodeIcon     = ({size=20,color='currentColor',sw}) => base(<>
  <polyline points="16 18 22 12 16 6" stroke={color} strokeWidth={sw||1.5} fill="none" strokeLinecap="round" strokeLinejoin="round"/>
  <polyline points="8 6 2 12 8 18"   stroke={color} strokeWidth={sw||1.5} fill="none" strokeLinecap="round" strokeLinejoin="round"/>
</>, size, color, sw);
export const SkizzeIcon   = ({size=20,color='currentColor',sw}) => base(<>
  <rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth={sw||1.5} fill="none"/>
  <path d="M3 9h18M9 21V9" stroke={color} strokeWidth={sw||1.5} fill="none" strokeLinecap="round"/>
  <path d="M13 13h5M13 17h3" stroke={color} strokeWidth={sw||1.5} fill="none" strokeLinecap="round"/>
</>, size, color, sw);
export const WrenchIcon   = ({size=20,color='currentColor',sw}) => base(<>
  <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" stroke={color} strokeWidth={sw||1.5} fill="none" strokeLinecap="round" strokeLinejoin="round"/>
</>, size, color, sw);