Morphing dialog

import * as React from "react"
import { CalendarCheck } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  MorphingDialog,
  MorphingDialogClose,
  MorphingDialogContainer,
  MorphingDialogContent,
  MorphingDialogDescription,
  MorphingDialogMedia,
  MorphingDialogSubtitle,
  MorphingDialogTitle,
  MorphingDialogTrigger,
} from "@/components/goodui/morphing-dialog"

export function ServiceCard() {
  const [open, setOpen] = React.useState(false)

  return (
    <MorphingDialog open={open} onOpenChange={setOpen}>
      <MorphingDialogTrigger className="max-w-xs shadow-xs hover:shadow-md">
        <MorphingDialogMedia className="h-24 bg-gradient-to-br from-amber-300 to-rose-400" />
        <span className="block p-4">
          <MorphingDialogTitle>Balayage and gloss</MorphingDialogTitle>
          <MorphingDialogSubtitle>2 h 30 min · $185</MorphingDialogSubtitle>
        </span>
      </MorphingDialogTrigger>

      <MorphingDialogContainer>
        <MorphingDialogContent>
          <MorphingDialogClose />
          <MorphingDialogMedia className="h-40 shrink-0 bg-gradient-to-br from-amber-300 to-rose-400" />
          <div className="overflow-y-auto p-6">
            <MorphingDialogTitle>Balayage and gloss</MorphingDialogTitle>
            <MorphingDialogSubtitle>2 h 30 min · $185</MorphingDialogSubtitle>
            <MorphingDialogDescription className="mt-4 space-y-4">
              <p className="text-sm text-muted-foreground">
                Hand-painted highlights finished with a toning gloss and blow-dry. Includes a 10 minute consultation.
              </p>
              <Button className="w-full" onClick={() => setOpen(false)}>
                <CalendarCheck /> Book Tue 10:00 AM
              </Button>
            </MorphingDialogDescription>
          </div>
        </MorphingDialogContent>
      </MorphingDialogContainer>
    </MorphingDialog>
  )
}