import type {StoryObj} from '@storybook/angular';
import {ArrayButtons} from 'sae-lib/buttons/array-buttons/array-buttons';

/**
 * sections :
 *
 * Colors
 * Typography
 * Icons
 * Layouts
 * Radius
 * Strokes
 * Effects
 *
 */

// Colors section
export default {
  title: 'Foundations/colors/palette',
};

export const FoundationsColorsArray: StoryObj<ArrayButtons> = {
  name: 'Colors',
  render: () => ({
    template: `
      <div style="display: flex; flex-wrap: wrap; gap: 16px;">
        <sae-array-buttons></sae-array-buttons>
      </div>
    `,
    moduleMetadata: {
      imports: [ArrayButtons],
    },
  }),
};

// Typography section
// export const Typography: StoryObj<Typography> = {
//   name: 'Typography',
//   render: () => ({
//     template: `<sae-typo></sae-typo>`,
//     moduleMetadata: {
//       imports: [Typography],
//     },
//   }),
// };
//
// // Icons section (placeholder)
// export const Icons: StoryObj = {
//   name: 'Icons',
//   render: () => ({
//     template: `<div>Icons component not yet implemented</div>`,
//   }),
// };
//
// // Layouts section
// export const Layouts: StoryObj<Layouts> = {
//   name: 'Layouts',
//   render: () => ({
//     template: `<sae-layout></sae-layout>`,
//     moduleMetadata: {
//       imports: [Layouts],
//     },
//   }),
// };
//
// // Radius section
// export const Radius: StoryObj<Radius> = {
//   name: 'Radius',
//   render: () => ({
//     template: `<lib-sae-main-button></lib-sae-main-button>`,
//     moduleMetadata: {
//       imports: [Radius],
//     },
//   }),
// };

// Strokes section
// export const Strokes: StoryObj<StrokesComponent> = {
//   name: 'Strokes',
//   render: () => ({
//     template: `<sae-strokes></sae-strokes>`,
//     moduleMetadata: {
//       imports: [Strokes],
//     },
//   }),
// };

// Effects section (placeholder)
// export const Effects: StoryObj = {
//   name: 'Effects',
//   render: () => ({
//     template: `<div>Effects component not yet implemented</div>`,
//   }),
// };