import { Button, Card, Separator } from "@cooud-ui/ui";

export function EmailReceiptBlock() {
  return (
    <div className="flex justify-center bg-surface-inset/40 p-6">
      <Card className="w-full max-w-xl gap-0 overflow-hidden p-0 shadow-lg">
        <div className="flex justify-center border-b border-border/60 px-8 py-6">
          <span className="inline-flex items-center gap-2">
            <span className="inline-flex size-7 items-center justify-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
              <span className="size-3 rounded-sm bg-primary-foreground/90" aria-hidden="true" />
            </span>
            <span className="font-display text-lg font-semibold tracking-tight">Cooud</span>
          </span>
        </div>

        <div className="flex flex-col gap-5 px-8 py-8">
          <div className="flex flex-col gap-1">
            <h1 className="font-display text-2xl font-semibold tracking-tight">Receipt from Cooud</h1>
            <p className="text-sm text-fg-secondary">
              Order #CO-10482 · April 18, 2026
            </p>
          </div>

          <table className="w-full border-collapse text-sm">
            <thead>
              <tr className="text-left text-xs uppercase tracking-wide text-fg-tertiary">
                <th className="pb-2 font-medium">Description</th>
                <th className="pb-2 text-center font-medium">Qty</th>
                <th className="pb-2 text-right font-medium">Amount</th>
              </tr>
            </thead>
            <tbody className="text-fg-secondary">
              <tr className="border-t border-border/60">
                <td className="py-3">Pro plan — monthly</td>
                <td className="py-3 text-center">1</td>
                <td className="py-3 text-right">$24.00</td>
              </tr>
              <tr className="border-t border-border/60">
                <td className="py-3">Additional seats</td>
                <td className="py-3 text-center">3</td>
                <td className="py-3 text-right">$36.00</td>
              </tr>
              <tr className="border-t border-border/60">
                <td className="py-3">Priority support</td>
                <td className="py-3 text-center">1</td>
                <td className="py-3 text-right">$12.00</td>
              </tr>
            </tbody>
          </table>

          <Separator />

          <div className="flex flex-col gap-1.5 text-sm">
            <div className="flex items-center justify-between text-fg-secondary">
              <span>Subtotal</span>
              <span>$72.00</span>
            </div>
            <div className="flex items-center justify-between font-semibold text-fg">
              <span>Total</span>
              <span>$72.00</span>
            </div>
          </div>

          <div>
            <Button variant="gradient" size="lg">
              View invoice
            </Button>
          </div>
        </div>

        <div className="flex flex-col gap-1 border-t border-border/60 px-8 py-6 text-xs text-fg-tertiary">
          <p>
            Questions about this charge? Contact{" "}
            <a href="#support" className="underline underline-offset-4 hover:text-fg-secondary">
              support@cooud.com
            </a>
          </p>
          <p>Cooud, Inc. · 2261 Market St, San Francisco</p>
        </div>
      </Card>
    </div>
  );
}