import React from 'react';
import type { Service } from '../data/site';

type ServiceIconProps = {
  name: Service['icon'];
  className?: string;
};

const stroke = {
  fill: 'none',
  stroke: 'currentColor',
  strokeWidth: 1.2,
  strokeLinecap: 'round' as const,
  strokeLinejoin: 'round' as const
};

export function ServiceIcon({ name, className = 'h-12 w-12' }: ServiceIconProps) {
  return (
    <svg viewBox="0 0 48 48" className={className} aria-hidden="true" role="presentation">
      {name === 'draft' &&
      <g {...stroke}>
          <path d="M6 40h36" />
          <path d="M10 40V14l14-8 14 8v26" />
          <path d="M10 22h28M24 6v34" />
          <circle cx="24" cy="22" r="3" />
        </g>
      }
      {name === 'tower' &&
      <g {...stroke}>
          <path d="M8 42h32" />
          <path d="M15 42V10l9-5 9 5v32" />
          <path d="M19 15h10M19 21h10M19 27h10M19 33h10" />
        </g>
      }
      {name === 'mall' &&
      <g {...stroke}>
          <path d="M6 42h36" />
          <path d="M9 42V20h30v22" />
          <path d="M9 20l6-10h18l6 10" />
          <path d="M19 42V30h10v12" />
        </g>
      }
      {name === 'villa' &&
      <g {...stroke}>
          <path d="M5 42h38" />
          <path d="M9 42V22l15-10 15 10v20" />
          <path d="M18 42V30h12v12" />
          <path d="M9 26h30" />
        </g>
      }
      {name === 'renew' &&
      <g {...stroke}>
          <path d="M10 42h28V20L24 10 10 20z" />
          <path d="M31 6a9 9 0 1 0 6 15" />
          <path d="M38 5v7h-7" />
        </g>
      }
      {name === 'manage' &&
      <g {...stroke}>
          <rect x="8" y="8" width="32" height="32" rx="2" />
          <path d="M8 17h32" />
          <path d="M14 25h8M14 32h14M27 24l4 4 7-8" />
        </g>
      }
      {name === 'invest' &&
      <g {...stroke}>
          <path d="M7 40h34" />
          <path d="M12 40V26M22 40V18M32 40V30" />
          <path d="M9 16l10-6 8 5 12-9" />
          <path d="M39 6h-7M39 6v7" />
        </g>
      }
      {name === 'landscape' &&
      <g {...stroke}>
          <path d="M5 40h38" />
          <path d="M14 40V24M14 24c-4 0-7-3-7-6s3-5 7-5 7 2 7 5-3 6-7 6z" />
          <path d="M31 40V22l7-7 4 5v20" />
          <path d="M24 40c2-4 5-6 9-6" />
        </g>
      }
    </svg>);

}