import type { Preview } from "@storybook/react";
import { CustomizationDecorator } from "../stories/CustomizationDecorator";
import React from "react";

// Load Google Fonts for better rendering in Storybook
const googleFonts = [
  "Roboto",
  "Open+Sans",
  "Lato",
  "Montserrat",
  "Poppins",
];

if (typeof document !== "undefined") {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = `https://fonts.googleapis.com/css2?${googleFonts.map(font => `family=${font}:wght@400;600;700`).join("&")}&display=swap`;
  document.head.appendChild(link);
}

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    layout: "fullscreen",
  },
  decorators: [
    (Story) => (
      <CustomizationDecorator>
        <div style={{ padding: "20px", backgroundColor: "#f5f5f5", minHeight: "100vh" }}>
          <Story />
        </div>
      </CustomizationDecorator>
    ),
  ],
};

export default preview;