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

const meta: Meta<typeof NearbyPackageCard> = {
  title: 'Molecules/NearbyPackageCard',
  component: NearbyPackageCard,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 480, width: '100%' }}>
        <Story />
      </Box>
    ),
  ],
};

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

/** Default — full metadata including rating and review count */
export const Default: Story = {
  args: {
    packageName: 'Everyday Cremation',
    price: 4200,
    providerName: 'H.Parsons Funerals',
    location: 'Wentworth',
    rating: 4.5,
    reviewCount: 32,
    onClick: () => alert('Navigate to provider package'),
  },
};

/** Without rating — provider has no reviews yet */
export const WithoutRating: Story = {
  args: {
    packageName: 'Simple Farewell',
    price: 3800,
    providerName: 'Riverstone Funerals',
    location: 'Mildura',
    onClick: () => alert('Navigate to provider package'),
  },
};

/** Non-interactive — no onClick */
export const Static: Story = {
  args: {
    packageName: 'Everyday Cremation',
    price: 4200,
    providerName: 'H.Parsons Funerals',
    location: 'Wentworth',
    rating: 4.5,
    reviewCount: 32,
  },
};

/** Stacked — as rendered in the similar-packages list */
export const Stacked: Story = {
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <NearbyPackageCard
        packageName="Everyday Cremation"
        price={4200}
        providerName="H.Parsons Funerals"
        location="Wentworth"
        rating={4.5}
        reviewCount={32}
        onClick={() => {}}
      />
      <NearbyPackageCard
        packageName="Traditional Farewell"
        price={6800}
        providerName="Mackay Family Funerals"
        location="Parramatta"
        rating={4.7}
        reviewCount={58}
        onClick={() => {}}
      />
      <NearbyPackageCard
        packageName="Simple Cremation"
        price={3500}
        providerName="Coastal Funerals"
        location="Cronulla"
        rating={4.3}
        reviewCount={14}
        onClick={() => {}}
      />
    </Box>
  ),
};
