const path = require('path')

module.exports = {
  plugins: ['@svgr/plugin-jsx', '@svgr/plugin-prettier'],
  typescript: true,
  jsxRuntime: 'automatic',
  icon: true,
  expandProps: 'end',
  svgProps: {
    'aria-hidden': 'true'
  },
  replaceAttrValues: {
    '#000': '{color}',
    '#fff': '{color}',
    'black': '{color}',
    'white': '{color}',
    'currentColor': '{color}'
  },
  template: (variables, { tpl }) => {
    return tpl`
/**
 * @fileoverview Auto-generated React component from SVG
 * 
 * This file is automatically generated by SVGR from SVG files located in:
 * packages/core/icons/assets/
 * 
 * DO NOT EDIT THIS FILE DIRECTLY.
 * 
 * To modify this icon:
 * 1. Edit the corresponding SVG file in packages/core/icons/assets/
 * 2. Run \`npm run generate\` in this package to regenerate components
 * 
 * @generated
 */
import * as React from 'react';
import type { IconProps } from '../types';

${variables.interfaces};

const ${variables.componentName} = ({ color = 'currentColor', ...props }: IconProps) => (
  ${variables.jsx}
);

${variables.exports};
`
  },
  indexTemplate: (filePaths) => {
    const exportEntries = filePaths.map(({ path: filePath }) => {
      const basename = path.basename(filePath, path.extname(filePath))
      const componentName = /^\d/.test(basename) ? `Svg${basename}` : basename
      const iconName = `${componentName}Icon`
      return `export { default as ${iconName} } from './${basename}';`
    })
    
    const header = `/**
 * @fileoverview Auto-generated index file for React icon components
 * 
 * This file is automatically generated by SVGR from SVG files located in:
 * packages/core/icons/assets/
 * 
 * DO NOT EDIT THIS FILE DIRECTLY.
 * 
 * To modify icons or add new ones:
 * 1. Add/edit SVG files in packages/core/icons/assets/
 * 2. Run \`npm run generate\` in this package to regenerate components
 * 
 * @generated
 */
`
    
    return header + exportEntries.join('\n') + '\n'
  }
}