import { RadioCard } from "@/components/ui/radio-card"

const radioCardDemoProps = {
  description: "checkbox card description",
  label: "Label",
  supportDescription: "Support Description",
  supportLabel: "Support",
}

const radioCardRtlDemoProps = {
  description:
    "\u0648\u0635\u0641 \u0628\u0637\u0627\u0642\u0629 \u0645\u0631\u0628\u0639 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631",
  label: "\u0627\u0644\u062a\u0633\u0645\u064a\u0629",
  supportDescription: "\u0648\u0635\u0641 \u062f\u0627\u0639\u0645",
  supportLabel: "\u062f\u0639\u0645",
}

export function RadioCardDemo() {
  return (
    <div className="grid gap-6">
      <div className="flex flex-wrap items-start gap-4">
        <RadioCard {...radioCardDemoProps} type="with-icon" />
        <RadioCard {...radioCardDemoProps} type="icon-radio-right" />
        <RadioCard {...radioCardDemoProps} type="icon-radio-left" />
        <RadioCard {...radioCardDemoProps} type="radio-label" />
      </div>

      <div className="flex flex-wrap items-start gap-4">
        <RadioCard {...radioCardDemoProps} checked type="with-avatar" />
        <RadioCard {...radioCardDemoProps} checked type="payment" />
        <RadioCard {...radioCardDemoProps} checked type="company-icon" />
      </div>

      <div className="flex flex-wrap items-start gap-4" dir="rtl">
        <RadioCard {...radioCardRtlDemoProps} direction="rtl" type="with-icon" />
        <RadioCard
          {...radioCardRtlDemoProps}
          checked
          direction="rtl"
          type="payment"
        />
        <RadioCard
          {...radioCardRtlDemoProps}
          disabled
          direction="rtl"
          type="company-icon"
        />
      </div>
    </div>
  )
}
