Credit Card

"use client"

import { useState } from "react"

import { CreditCard } from "@/components/card/credit-card"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

// Every word on the page. Change copy here, not in the markup.
const FINISHES = [
  { value: "dark", label: "Slate" },
  { value: "black", label: "Ink" },
  { value: "glass", label: "Glass" },
] as const

export default function CreditCardDemo() {
  const [variant, setVariant] = useState<"dark" | "black" | "glass">("dark")
  return (
    <>
      <ToggleGroup
        aria-label="Card finish"
        value={[variant]}
        onValueChange={(values) => {
          const value = values[0]
          if (value === "dark" || value === "black" || value === "glass")
            setVariant(value)
        }}
      >
        {FINISHES.map(({ value, label }) => (
          <ToggleGroupItem key={value} value={value}>
            {label}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
      <CreditCard className="p-4" variant={variant} />
    </>
  )
}