"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { CommissionExtra, CommissionOption, CommissionType, CommissionTypeExtra, CommissionTypeOption } from "@/generated/prisma"
// import { useState } from "react"
// import { Badge } from "../ui/badge"

type CommissionTypeWithItems = CommissionType & {
  options: (CommissionTypeOption & {
    option: CommissionOption | null
  })[]
  extras: (CommissionTypeExtra & {
    extra: CommissionExtra | null
  })[]
}

export function CommissionCard({ commission }: { commission: CommissionTypeWithItems }) {
  // const [open, setOpen] = useState(false)

  return (
    <div className="flex flex-col h-full">
      <Card className="flex flex-col flex-1">
        <CardHeader>
          <CardTitle className="text-xl font-bold">{commission.name}</CardTitle>
          <p className="text-muted-foreground text-sm">{commission.description}</p>
        </CardHeader>

        <CardContent className="flex flex-col justify-start gap-4">
          {/* {examples && examples.length > 0 && (
            <Collapsible open={open} onOpenChange={setOpen}>
              <CollapsibleTrigger className="text-sm underline text-muted-foreground">
                {open ? "Hide Examples" : "See Examples"}
              </CollapsibleTrigger>
              <CollapsibleContent asChild>
                <div className="overflow-hidden transition-all data-[state=closed]:max-h-0 data-[state=open]:max-h-[300px]">
                  <div className="flex gap-2 mt-2 overflow-x-auto">
                    {examples.map((src, idx) => (
                      <Image
                        key={src + idx}
                        src={src}
                        width={100}
                        height={100}
                        alt={`${type.name} example ${idx + 1}`}
                        className="h-24 w-auto rounded border"
                      />
                    ))}
                  </div>
                </div>
              </CollapsibleContent>
            </Collapsible>
          )} */}
          <div>
            <h4 className="font-semibold">Options</h4>
            <ul className="pl-4 list-disc">
              {commission.options.map((option) => (
                <li key={option.id}>
                  {option.option?.name}:{" "}
                  {option.price
                    ? `${option.price}€`
                    : option.pricePercent
                      ? `+${option.pricePercent}%`
                      : option.priceRange
                        ? `${option.priceRange}€`
                        : "Included"}
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="font-semibold">Extras</h4>
            <ul className="pl-4 list-disc">
              {commission.extras.map((extra) => (
                <li key={extra.id}>
                  {extra.extra?.name}:{" "}
                  {extra.price
                    ? `${extra.price}€`
                    : extra.pricePercent
                      ? `+${extra.pricePercent}%`
                      : extra.priceRange
                        ? `${extra.priceRange}€`
                        : "Included"}
                </li>
              ))}
            </ul>
          </div>

          {/* <div className="flex flex-wrap gap-2">
            {commission.extras.map((extra) => (
              <Badge variant="outline" key={extra.id}>
                {extra.extra?.name}
              </Badge>
            ))}
          </div> */}
        </CardContent>
      </Card>
    </div>
  )
}
