Media Card

import { MediaCard, XStack, YStack } from '@otfdashkit/ui-native'
import { ShowcaseFrame, Section } from '../../components/ShowcaseFrame'
import { SCENES } from '../../lib/fixtures'

// Real, self-hosted editorial scenes (R2) keyed by id.
const scene = (id: string) => SCENES.find((s) => s.id === id)!.image
const COVER_1 = scene('coast')
const COVER_2 = scene('mountains')
const COVER_3 = scene('forest')
const COVER_4 = scene('city')

export default function MediaCardShowcase() {
  return (
    <ShowcaseFrame
      title="Media Card"
      description="Edge-to-edge image with a gradient-overlaid title block. Used for editorial grids, hero rows, and content tiles."
      docPath="packages/ui-native/src/patterns/MediaCard.tsx"
    >
      <Section title="Default — gradient overlay, 16:9">
        <YStack>
          <MediaCard
            image={COVER_1}
            title="The new fundamentals of strength"
            subtitle="A 4-week primer for hybrid athletes"
          />
        </YStack>
      </Section>

      <Section title="With badge">
        <YStack>
          <MediaCard
            image={COVER_2}
            title="Trail running starter pack"
            subtitle="Curated by Sarah Chen"
            badge="NEW"
          />
        </YStack>
      </Section>

      <Section title="Two sizes — 16:9 vs 1:1" hint="aspectRatio prop">
        <XStack gap="$3" flexWrap="wrap">
          <YStack flex={1} minWidth={240}>
            <MediaCard
              image={COVER_3}
              title="Mobility primer"
              subtitle="20 minutes, daily"
              aspectRatio={16 / 9}
            />
          </YStack>
          <YStack flex={1} minWidth={240}>
            <MediaCard
              image={COVER_4}
              title="Recovery sessions"
              subtitle="Wind down, sleep deeper"
              aspectRatio={1}
            />
          </YStack>
        </XStack>
      </Section>

      <Section title="Dark overlay">
        <MediaCard
          image={COVER_1}
          title="Long-form interviews"
          subtitle="With Alex Rivera + Jordan Kim"
          overlay="dark"
        />
      </Section>

      <Section title="No overlay — title sits on raw image">
        <MediaCard
          image={COVER_2}
          title="Field notes"
          overlay="none"
        />
      </Section>
    </ShowcaseFrame>
  )
}