import { Card } from "@/components/ui/card"

const cardImage = new URL("../assets/images/art-01.jpg", import.meta.url).href

const rtlCardCopy = {
  action: "\u0627\u0646\u0642\u0631 \u0647\u0646\u0627",
  subtitle:
    "\u0639\u0646\u0648\u0627\u0646 \u0641\u0631\u0639\u064a \u0644\u0644\u0628\u0637\u0627\u0642\u0629",
  title:
    "\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0628\u0637\u0627\u0642\u0629",
}

export function CardDemo() {
  return (
    <div className="grid gap-6">
      <div className="flex flex-wrap items-start gap-4">
        <Card imageSrc={cardImage} />
        <Card imageSrc={cardImage} type="full-image" />
      </div>

      <div className="grid gap-4">
        <Card imageSrc={cardImage} orientation="horizontal" />
        <Card imageSrc={cardImage} orientation="horizontal" type="trailing-image" />
      </div>

      <div dir="rtl" className="flex flex-wrap items-start gap-4">
        <Card
          dir="rtl"
          primaryActionLabel={rtlCardCopy.action}
          secondaryActionLabel={rtlCardCopy.action}
          imageSrc={cardImage}
          subtitle={rtlCardCopy.subtitle}
          title={rtlCardCopy.title}
        />
        <Card
          breakpoint="mobile"
          dir="rtl"
          orientation="horizontal"
          primaryActionLabel={rtlCardCopy.action}
          secondaryActionLabel={rtlCardCopy.action}
          imageSrc={cardImage}
          subtitle={rtlCardCopy.subtitle}
          title={rtlCardCopy.title}
        />
      </div>
    </div>
  )
}
