import type { Decorator } from '@storybook/react';
import type { CSSVariables } from '../../utils/types.js';

const defaultAccordionStyles: CSSVariables = {
  '--hscl-listItem-color-primary': '#33475b',
  '--hscl-listItem-color-secondary': '#516f90',

  '--hscl-accordion-variant1-borderColor': '#e0e0e0',
  '--hscl-accordion-variant1-borderRadius': '4px',
  '--hscl-accordion-variant1-borderWidth': '1px',
  '--hscl-accordion-variant1-backgroundColor': 'transparent',
  '--hscl-accordion-variant1-color': '#33475b',
  '--hscl-accordion-variant1-icon-fill': '#33475b',

  '--hscl-accordion-variant2-borderColor': '#cbd6e2',
  '--hscl-accordion-variant2-borderRadius': '8px',
  '--hscl-accordion-variant2-borderWidth': '1px',
  '--hscl-accordion-variant2-backgroundColor': '#f5f8fa',
  '--hscl-accordion-variant2-color': '#33475b',
  '--hscl-accordion-variant2-icon-fill': '#516f90',

  '--hscl-accordion-variant3-borderColor': '#ff7a59',
  '--hscl-accordion-variant3-borderRadius': '0',
  '--hscl-accordion-variant3-borderWidth': '2px',
  '--hscl-accordion-variant3-backgroundColor': 'transparent',
  '--hscl-accordion-variant3-color': '#33475b',
  '--hscl-accordion-variant3-icon-fill': '#ff7a59',

  '--hscl-accordion-variant4-borderColor': '#33475b',
  '--hscl-accordion-variant4-borderRadius': '12px',
  '--hscl-accordion-variant4-borderWidth': '1px',
  '--hscl-accordion-variant4-backgroundColor': '#eaf0f6',
  '--hscl-accordion-variant4-color': '#33475b',
  '--hscl-accordion-variant4-icon-fill': '#33475b',
};

export const withAccordionStyles: Decorator = Story => (
  <div style={defaultAccordionStyles}>
    <Story />
  </div>
);
