import { Layout } from './Layout';

export default {
  title: 'Layout/Layout',
  component: Layout,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    children: (
      <div className="col-span-12 bg-white p-6 rounded-lg shadow">
        <h2 className="text-2xl font-bold mb-4">Layout Content</h2>
        <p>This is a responsive layout container with breakpoint classes.</p>
      </div>
    ),
  },
};

export const WithGrid = {
  render: () => (
    <Layout>
      <div className="col-span-12 md:col-span-8 bg-blue-100 p-6 rounded-lg">
        <h3 className="font-bold mb-2">Main Content (8 cols on md+)</h3>
        <p>This section takes 8 columns on medium screens and above.</p>
      </div>
      <div className="col-span-12 md:col-span-4 bg-green-100 p-6 rounded-lg">
        <h3 className="font-bold mb-2">Sidebar (4 cols on md+)</h3>
        <p>This section takes 4 columns on medium screens and above.</p>
      </div>
    </Layout>
  ),
};

