/** @type { import('@storybook/react').Preview } */
import "../app/globals.css";
import { useDarkMode } from "storybook-dark-mode";
import { themes } from "@storybook/theming";
import "@fortawesome/fontawesome-svg-core/styles.css"; // Import the CSS

const preview = {
  parameters: {
    docs: {
      theme: themes.dark,
    },
    actions: {
      argTypesRegex: "^on[A-Z].*",
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    darkMode: {
      classTarget: "html",
      darkClass: "dark",
      lightClass: "light",
      stylePreview: true,
    },
  },
};

export const decorators = [
  (Story) => {
    const currentTheme = useDarkMode() ? "light" : "dark";
    return <Story theme={currentTheme} />;
  },
];

export default preview;