Citation Rail

import { CitationRail } from '@/components/ui/citation-rail'

'use client'

import { CitationRail, type CitationSource } from '@/components/ui/citation-rail'

const PASSAGE =
  'Stripe refunds settle in two to seven business days for US debit cards [1], while chargebacks follow a separate dispute timeline that can stretch past 75 days [2]. For enterprise billing, Acme Logistics posted a 12% reduction in open exceptions after wiring Meridian into their Xero close pack [3].'

const SOURCES: CitationSource[] = [
  {
    id: 'stripe-refunds',
    title: 'Refunds, timing and settlement windows',
    domain: 'stripe.com',
    snippet:
      'Most US debit-card refunds appear within 2–7 business days. Credit cards may take one full statement cycle depending on the issuing bank.',
    href: 'https://stripe.com/docs/refunds',
  },
  {
    id: 'stripe-disputes',
    title: 'Disputes and chargeback timelines',
    domain: 'stripe.com',
    snippet:
      'Issuers can open a dispute for up to 75–120 days after the charge posts. Respond with evidence before the deadline listed in the Dashboard.',
    href: 'https://stripe.com/docs/disputes',
  },
  {
    id: 'meridian-case',
    title: 'How Acme Logistics cut month-end exceptions by 12%',
    domain: 'meridian.dev',
    snippet:
      'After connecting Meridian to Xero, the finance team closed March with 41 fewer open invoice exceptions and a single human approval gate on refunds over $500.',
    href: 'https://meridian.dev/customers/acme-logistics',
  },
]

export default function CitationRailDemo() {
  return (
    <div className="mx-auto w-full max-w-5xl px-4 py-12 sm:px-6 sm:py-16">
      <div className="mb-8 max-w-2xl">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Answer · refund policy
        </p>
        <h2 className="mt-3 text-xl font-semibold tracking-tight text-balance sm:text-2xl">
          When does a Stripe refund hit the card?
        </h2>
      </div>
      <CitationRail
        passage={PASSAGE}
        sources={SOURCES}
        railLabel="Sources"
        onSourceClick={() => {
          /* demo: parent would open source detail */
        }}
      />
    </div>
  )
}