import { useState } from "react"
import { Quote } from "./pocketbase-types"

interface QuoteInfoProps {
  quote: Quote;
}
export default function QuoteInfo({ quote }: QuoteInfoProps) {

  return (
    //TODO: Bettes Colors
    <div className="dark:bg-slate-800 shadow-(--box) m-1 p-2">
      <p className="border-4 border-black bg-slate-300 text-black p-1 my-1">{quote.quote}</p>
      {quote.context && <p className="border-4 border-black bg-slate-300 text-black p-1 my-1">{quote.context}</p>}
      <div className="flex flex-row">
        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20">Author:</p>
        <p className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow">{quote.author}</p>
      </div>
      <div className="flex flex-row">
        <p className="bg-lime-400 text-zinc-800 p-1 border-4 border-r-2 border-black w-20">Date:</p>
        <p className="bg-slate-300 border-4 border-l-2 border-black text-black p-1 grow">{quote.date}</p>
      </div>
    </div>
  )
}