import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import { FuneralFinderV3 } from './FuneralFinderV3';

const meta: Meta<typeof FuneralFinderV3> = {
  title: 'Organisms/FuneralFinder',
  component: FuneralFinderV3,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  args: {
    onSearch: (params) => {
      console.log('Search params:', params);
    },
  },
};

export default meta;
type Story = StoryObj<typeof FuneralFinderV3>;

/** Default empty state — all fields ready for input */
export const Default: Story = {};

/** Loading state — CTA shows spinner */
export const Loading: Story = {
  args: { loading: true },
};

/** Below a masthead — overlapping hero section */
export const BelowMasthead: Story = {
  decorators: [
    (Story) => (
      <Box>
        <Box
          sx={{
            background: 'linear-gradient(160deg, #2C2E35 0%, #4C5B6B 60%, #6B3C13 100%)',
            color: '#fff',
            py: 8,
            px: 4,
            textAlign: 'center',
          }}
        >
          <Box
            sx={{
              fontSize: '2.5rem',
              fontWeight: 700,
              fontFamily: 'var(--fa-font-family-display)',
              mb: 1,
            }}
          >
            Funeral Arranger
          </Box>
          <Box sx={{ opacity: 0.8, fontSize: '1.125rem' }}>
            Find trusted funeral directors near you
          </Box>
        </Box>
        <Box
          sx={{
            maxWidth: 500,
            mx: 'auto',
            mt: -5,
            px: 2,
            position: 'relative',
            zIndex: 1,
          }}
        >
          <Story />
        </Box>
      </Box>
    ),
  ],
};

/** Constrained width — typical sidebar or narrow column */
export const Narrow: Story = {
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 380, mx: 'auto' }}>
        <Story />
      </Box>
    ),
  ],
};
