import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

export function Citation({
  quote,
  attribution,
  action
}: {
  quote: string;
  attribution: string;
  action?: string;
}) {
  return (
    <Card className="bg-bordeaux-deep text-ivory">
      <div className="grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
        <div>
          <p className="font-serif text-3xl italic leading-snug text-ivory md:text-4xl">“{quote}”</p>
          <p className="mt-5 text-sm text-gold-pale">{attribution}</p>
        </div>
        {action ? (
          <Button variant="secondary" className="border-gold/70 text-ivory hover:bg-gold/10">
            {action}
          </Button>
        ) : null}
      </div>
    </Card>
  );
}