import React from 'react'

/**
 * Shared layout used by every per-type `MessageAttachment` story —
 * three columns (Composer / Sent / Received) on a tinted page so the
 * dark sender bubbles read against a softer surface and the light
 * received bubbles still pop. Mirrors the layout the existing
 * `LinkAttachment` and `MediaMessage` stories use.
 */
export const StoryPage: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => <div className="min-h-screen w-full bg-[#F9F7F4] p-12">{children}</div>

export const StoryHeading: React.FC<{
  title: string
  description?: string
}> = ({ title, description }) => (
  <div className="mb-6">
    <h2 className="text-base font-semibold text-black/80">{title}</h2>
    {description ? (
      <p className="mt-1 max-w-prose text-sm text-black/55">{description}</p>
    ) : null}
  </div>
)

const ColumnHeader: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => (
  <p className="mb-3 text-xs font-medium uppercase tracking-wide text-black/40">
    {children}
  </p>
)

export interface StoryRowProps {
  label: string
  /** Omit `composer` to leave the column blank — used by stacked
   *  Image/Video rows since the composer surface only ever shows a
   *  single attachment (no stacked previews in the composer). */
  composer?: React.ReactNode
  sent: React.ReactNode
  received: React.ReactNode
}

export const StoryRow: React.FC<StoryRowProps> = ({
  label,
  composer,
  sent,
  received,
}) => (
  <div className="grid grid-cols-[160px_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] items-start gap-6 py-4">
    <p className="text-xs font-medium text-black/55">{label}</p>
    <div>{composer ?? null}</div>
    <div>{sent}</div>
    <div>{received}</div>
  </div>
)

export const StoryGrid: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => (
  <div className="space-y-3 divide-y divide-black/5">
    <div className="grid grid-cols-[160px_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] gap-6">
      <span />
      <ColumnHeader>Composer</ColumnHeader>
      <ColumnHeader>Sent</ColumnHeader>
      <ColumnHeader>Received</ColumnHeader>
    </div>
    {children}
  </div>
)