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

const meta: Meta<typeof FuneralFinderV4> = {
  title: 'Archive/FuneralFinder V4',
  component: FuneralFinderV4,
  parameters: {
    layout: 'padded',
  },
  args: {
    onSearch: (params) => {
      console.log('Search params:', params);
    },
  },
};

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

/** Default empty state — 3 steps + location ready for input */
export const Default: Story = {};

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

/** Placed inside a dark hero section to preview in context */
export const InsideHero: Story = {
  decorators: [
    (Story) => (
      <Box>
        <Box
          sx={{
            bgcolor: 'var(--fa-color-sage-800, #4c5459)',
            color: '#fff',
            py: 8,
            px: 4,
            textAlign: 'center',
          }}
        >
          <Box sx={{ fontSize: '2.5rem', fontWeight: 700, mb: 1 }}>Funeral Arranger</Box>
          <Box sx={{ opacity: 0.8, mb: 4 }}>Find trusted funeral directors near you</Box>
          <Box sx={{ maxWidth: 480, mx: 'auto' }}>
            <Story />
          </Box>
        </Box>
      </Box>
    ),
  ],
};

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