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

const DEMO_IMAGE =
  'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=300&fit=crop';

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

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

// --- Default -----------------------------------------------------------------

/** Compact provider card with image, name, location, and rating */
export const Default: Story = {
  args: {
    name: 'H.Parsons',
    location: 'Wentworth',
    imageUrl: DEMO_IMAGE,
    rating: 4.5,
    reviewCount: 11,
  },
};

// --- Without Image -----------------------------------------------------------

/** Provider without a photo — text only */
export const WithoutImage: Story = {
  args: {
    name: 'Smith & Sons Funerals',
    location: 'Parramatta',
    rating: 4.2,
    reviewCount: 38,
  },
};

// --- Without Rating ----------------------------------------------------------

/** Provider without reviews */
export const WithoutRating: Story = {
  args: {
    name: 'Peaceful Rest Funerals',
    location: 'Mildura',
    imageUrl: DEMO_IMAGE,
  },
};

// --- Interactive -------------------------------------------------------------

/** Clickable — navigates back to provider details */
export const Interactive: Story = {
  args: {
    name: 'H.Parsons',
    location: 'Wentworth',
    imageUrl: DEMO_IMAGE,
    rating: 4.5,
    reviewCount: 11,
    onClick: () => alert('Navigate to provider details'),
  },
};

// --- In Context --------------------------------------------------------------

/** As it appears at the top of the Package Select page */
export const InContext: Story = {
  render: () => (
    <Box>
      <Box
        component="button"
        onClick={() => {}}
        sx={{
          background: 'none',
          border: 'none',
          cursor: 'pointer',
          display: 'flex',
          alignItems: 'center',
          gap: 0.5,
          mb: 3,
          p: 0,
          color: 'text.secondary',
          fontFamily: 'inherit',
          fontSize: '1rem',
          '&:hover': { color: 'text.primary' },
        }}
      >
        ← Back
      </Box>
      <Box sx={{ typography: 'h3', mb: 3 }}>Select a package</Box>
      <ProviderCardCompact
        name="H.Parsons"
        location="Wentworth"
        imageUrl={DEMO_IMAGE}
        rating={4.5}
        reviewCount={11}
        onClick={() => alert('View provider')}
      />
    </Box>
  ),
};
