import {useId} from 'react';

type Category='all'|'tangible'|'intangible'|'investment';
const palettes={
 all:{light:'#b7fff0',front:'#20d4b7',bottom:'#079c91',side:'#087d80',top:'#e5fff7'},
 tangible:{light:'#b8e5ff',front:'#669bff',bottom:'#3e64d8',side:'#3049a3',top:'#e6f6ff'},
 intangible:{light:'#efccff',front:'#b28aff',bottom:'#7c50d8',side:'#5a389f',top:'#fff0ff'},
 investment:{light:'#ffecb2',front:'#ffc266',bottom:'#e49233',side:'#b86c24',top:'#fff7dc'},
};

/** Small native SVG solids keep their facets crisp at the existing 24–28 px size. */
export function CategoryAssetIcon({category}:{category:Category}){
 const id=`category-${useId().replace(/:/g,'')}`;
 const palette=palettes[category];
 const paint=(name:string)=>`url(#${id}-${name})`;
 return <svg className="category-asset-icon" width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden="true" focusable="false">
  <defs>
   <linearGradient id={`${id}-front`} x1="5" y1="4" x2="25" y2="29" gradientUnits="userSpaceOnUse">
    <stop stopColor={palette.light}/><stop offset=".45" stopColor={palette.front}/><stop offset="1" stopColor={palette.bottom}/>
   </linearGradient>
   <linearGradient id={`${id}-side`} x1="16" y1="8" x2="27" y2="29" gradientUnits="userSpaceOnUse">
    <stop stopColor={palette.bottom}/><stop offset="1" stopColor={palette.side}/>
   </linearGradient>
   <linearGradient id={`${id}-top`} x1="8" y1="3" x2="24" y2="13" gradientUnits="userSpaceOnUse">
    <stop stopColor={palette.top}/><stop offset="1" stopColor={palette.light}/>
   </linearGradient>
   <radialGradient id={`${id}-shadow`}><stop stopColor={palette.side} stopOpacity=".27"/><stop offset="1" stopColor={palette.side} stopOpacity="0"/></radialGradient>
   <linearGradient id={`${id}-growth`} x1="6" y1="18" x2="28" y2="3" gradientUnits="userSpaceOnUse">
    <stop stopColor="#078f87"/><stop offset=".6" stopColor="#12b8a1"/><stop offset="1" stopColor="#64e4ba"/>
   </linearGradient>
  </defs>
  <ellipse cx="16" cy="29" rx="15" ry="2.7" fill={paint('shadow')}/>
  {category==='all'&&<>
   <path d="M14 3.5 18.4 12.1 27 16.5 18.4 20.9 14 29.5 9.6 20.9 1 16.5 9.6 12.1Z" fill={paint('side')} transform="translate(1 0)"/>
   <path d="M14 1.5 18.4 10.1 27 14.5 18.4 18.9 14 27.5 9.6 18.9 1 14.5 9.6 10.1Z" fill={paint('front')}/>
   <path d="M14 1.5V14.5H1L9.6 10.1Z" fill={paint('top')}/>
   <path d="M14 14.5H27L18.4 18.9 14 27.5Z" fill={palette.bottom} opacity=".75"/>
   <path d="m14 1.5 4.4 8.6 8.6 4.4" stroke="#effffb" strokeOpacity=".8" strokeWidth=".7" strokeLinejoin="round"/>
   <path d="m26 1 1.5 3.5L31 6l-3.5 1.5L26 11l-1.5-3.5L21 6l3.5-1.5Z" fill="#8d7af0"/>
   <path d="m27.5 21 .9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9Z" fill="#37c4c4"/>
  </>}
  {category==='tangible'&&<>
   <path d="m10 7 10 4v18l-10-4Z" fill={paint('front')}/>
   <path d="m20 11 8-4v18l-8 4Z" fill={paint('side')}/>
   <path d="m10 7 8-4 10 4-8 4Z" fill={paint('top')}/>
   <path d="m10 7 10 4 8-4M20 11v18" stroke="#def3ff" strokeOpacity=".7" strokeWidth=".7"/>
   <path d="m12.5 11 2 .8v2.5l-2-.8Zm4 1.6 2 .8v2.5l-2-.8Zm-4 3.4 2 .8v2.5l-2-.8Zm4 1.6 2 .8v2.5l-2-.8Zm-4 3.4 2 .8v2.5l-2-.8Zm4 1.6 2 .8v2.5l-2-.8Z" fill="#edfaff"/>
   <path d="m23 12 2-1v2.5l-2 1Zm0 5 2-1v2.5l-2 1Zm0 5 2-1v2.5l-2 1Z" fill="#9cc6ff"/>
   <path d="m2 18 7 2.5V29l-7-2.5Z" fill={paint('front')}/>
   <path d="m9 20.5 5-3V26l-5 3Z" fill={paint('side')}/>
   <path d="m2 18 5-3 7 2.5-5 3Z" fill={paint('top')}/>
   <path d="m4 21 3 1v3l-3-1Z" fill="#e5faff"/>
  </>}
  {category==='intangible'&&<>
   <path d="M7 3.4a2 2 0 0 1 1.5-.2l17.8 4.5A2.3 2.3 0 0 1 28 10v13.8a2.5 2.5 0 0 1-1.2 2.2l-4.6 2.6L4.5 8Z" fill={paint('side')}/>
   <path d="m5.2 5.1 3.3-1.9 17.8 4.5-3.5 2Z" fill={paint('top')}/>
   <path d="M6.4 5.3 22 9.2a2.5 2.5 0 0 1 1.9 2.4v14.1a2 2 0 0 1-2.5 1.9L5.8 23.7a2.5 2.5 0 0 1-1.9-2.4V7.2a2 2 0 0 1 2.5-1.9Z" fill={paint('front')} stroke="#f1deff" strokeWidth=".6"/>
   <g transform="matrix(1 .25 0 1 0 -3.5)" stroke="#fff5ff" strokeWidth="1.4">
    <circle cx="14" cy="17" r="6.1"/>
    <path d="M16 14.8a3 3 0 1 0 0 4.4" strokeWidth="1.8" strokeLinecap="round"/>
   </g>
   <path d="m27 1.5 1 2.3 2.3 1-2.3 1-1 2.3-1-2.3-2.3-1 2.3-1Z" fill="#cfacff"/>
  </>}
  {category==='investment'&&<>
   <path d="m3 23 4 1.5V29l-4-1.5Zm9-4 4 1.5V29l-4-1.5Zm9-5 4 1.5V29l-4-1.5Z" fill={paint('front')}/>
   <path d="m7 24.5 3-1.5v4.5L7 29Zm9-4 3-1.5v8.5L16 29Zm9-5 3-1.5v13.5L25 29Z" fill={paint('side')}/>
   <path d="m3 23 3-1.5 4 1.5-3 1.5Zm9-4 3-1.5 4 1.5-3 1.5Zm9-5 3-1.5 4 1.5-3 1.5Z" fill={paint('top')}/>
   <path d="m4.5 18 7-6 5 1.5L26 5" stroke="#08766e" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"/>
   <path d="m4.5 16.5 7-6 5 1.5L26 3.5m-6.5 0H26V10" stroke={paint('growth')} strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round"/>
   <path d="m4.5 15.8 7-6 5 1.5 8.8-8" stroke="#b4ffe3" strokeWidth=".65" strokeLinecap="round" strokeLinejoin="round"/>
  </>}
 </svg>;
}