FuneralArranger/src/components/molecules/ComparisonPackageCard/ComparisonPackageCard.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import { ComparisonPackageCard } from './ComparisonPackageCard';
import type { ComparisonPackage } from '../../organisms/ComparisonTable';

// ─── Mock data ──────────────────────────────────────────────────────────────

const basePackage: ComparisonPackage = {
  id: 'wollongong-everyday',
  name: 'Everyday Funeral Package',
  price: 6966,
  provider: {
    name: 'Wollongong City Funerals',
    location: 'Wollongong',
    rating: 4.8,
    reviewCount: 122,
    verified: true,
  },
  sections: [
    {
      heading: 'Essentials',
      items: [
        {
          name: 'Allowance for Coffin',
          info: 'Allowance amount — upgrade options available.',
          value: { type: 'allowance', amount: 1750 },
        },
        {
          name: 'Cremation Certificate/Permit',
          info: 'Statutory medical referee fee.',
          value: { type: 'price', amount: 350 },
        },
        {
          name: 'Crematorium',
          info: 'Cremation facility fees.',
          value: { type: 'price', amount: 660 },
        },
        {
          name: 'Professional Service Fee',
          info: 'Coordination of arrangements.',
          value: { type: 'price', amount: 3650.9 },
        },
        {
          name: 'Transportation Service Fee',
          info: 'Transfer of the deceased.',
          value: { type: 'complimentary' },
        },
      ],
    },
    {
      heading: 'Optionals',
      items: [
        {
          name: 'Digital Recording',
          info: 'Professional video recording.',
          value: { type: 'complimentary' },
        },
        { name: 'Online Notice', info: 'Online death notice.', value: { type: 'complimentary' } },
        { name: 'Viewing Fee', info: 'One private family viewing.', value: { type: 'included' } },
      ],
    },
    {
      heading: 'Extras',
      items: [
        {
          name: 'Allowance for Celebrant',
          info: 'Professional celebrant or MC.',
          value: { type: 'allowance', amount: 550 },
        },
        { name: 'Catering', info: 'Post-service catering.', value: { type: 'poa' } },
        {
          name: 'Saturday Service Fee',
          info: 'Additional fee for Saturday services.',
          value: { type: 'price', amount: 880 },
        },
      ],
    },
  ],
};

const unverifiedPackage: ComparisonPackage = {
  ...basePackage,
  id: 'inglewood-everyday',
  name: 'Everyday Funeral Package',
  price: 7200,
  provider: {
    name: 'Inglewood Chapel',
    location: 'Inglewood',
    rating: 4.2,
    reviewCount: 45,
    verified: false,
  },
};

const recommendedPackage: ComparisonPackage = {
  ...basePackage,
  id: 'recommended-premium',
  name: 'Premium Cremation Service',
  price: 8450,
  provider: {
    name: 'H. Parsons Funeral Directors',
    location: 'Wentworth',
    rating: 4.9,
    reviewCount: 203,
    verified: true,
  },
  isRecommended: true,
};

// ─── Meta ───────────────────────────────────────────────────────────────────

const meta: Meta<typeof ComparisonPackageCard> = {
  title: 'Molecules/ComparisonPackageCard',
  component: ComparisonPackageCard,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 400, mx: 'auto' }}>
        <Story />
      </Box>
    ),
  ],
  args: {
    onArrange: (id) => alert(`Arrange: ${id}`),
  },
};

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

/** Verified provider — default appearance used in ComparisonPage mobile tab panel */
export const Verified: Story = {
  args: {
    pkg: basePackage,
  },
};

/** Unverified provider — "Make Enquiry" CTA + soft button variant, no verified badge */
export const Unverified: Story = {
  args: {
    pkg: unverifiedPackage,
  },
};

/** Recommended package — warm banner, selected card state, warm header background */
export const Recommended: Story = {
  args: {
    pkg: recommendedPackage,
  },
};

/** Itemisation unavailable — used when a provider hasn't submitted an itemised breakdown */
export const ItemizedUnavailable: Story = {
  args: {
    pkg: {
      ...unverifiedPackage,
      itemizedAvailable: false,
    },
  },
};