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

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

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

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

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

/** Placed below a masthead-style header to preview in context */
export const BelowMasthead: Story = {
  decorators: [
    (Story) => (
      <Box>
        {/* Simulated masthead */}
        <Box
          sx={{
            bgcolor: 'var(--fa-color-sage-800, #4c5459)',
            color: '#fff',
            py: 6,
            px: 4,
            textAlign: 'center',
          }}
        >
          <Box sx={{ fontSize: '2rem', fontWeight: 700, mb: 1 }}>Funeral Arranger</Box>
          <Box sx={{ opacity: 0.8 }}>Find trusted funeral directors near you</Box>
        </Box>
        {/* Widget below masthead */}
        <Box sx={{ maxWidth: 560, mx: 'auto', mt: -4, 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: 400, mx: 'auto' }}>
        <Story />
      </Box>
    ),
  ],
};