"use client";

import { useState } from "react";
import { ConfessionForm } from "@/components/confessions/ConfessionForm";

export function ConfessionComposer() {
  const [open, setOpen] = useState(false);

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="card-lift flex w-full items-center gap-3 rounded-2xl border border-dashed border-border bg-surface px-5 py-4 text-left"
      >
        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-accent to-accent-2 text-white">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.9} strokeLinecap="round" strokeLinejoin="round">
            <rect x="5" y="11" width="14" height="9" rx="2" />
            <path d="M8 11V7a4 4 0 1 1 8 0v4" />
          </svg>
        </span>
        <span className="min-w-0 flex-1">
          <span className="block text-[14.5px] font-semibold">Sen de içini dök...</span>
          <span className="block text-[12.5px] text-text-muted">Gizli ya da açık, kimse yargılamayacak.</span>
        </span>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-accent">
          <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
      </button>
    );
  }

  return <ConfessionForm onSuccess={() => setOpen(false)} />;
}