'use client';
import { useState } from 'react';

/** İlan başlığı ve açıklaması: emlak portalına yapıştırmak için kopyalanır. */
export function ListingText({ title, body }: { title: string; body: string }) {
  const [open, setOpen] = useState(false);
  const [ok, setOk] = useState('');
  const copy = (label: string, text: string) => { navigator.clipboard.writeText(text).then(() => { setOk(label); setTimeout(() => setOk(''), 1600); }).catch(() => {}); };
  return (
    <div className="border-t border-ink/15">
      <button type="button" onClick={() => setOpen(!open)} className="flex w-full items-center justify-between px-4 py-3 text-left">
        <span><span className="tag">İlan metni</span><span className="ml-2 text-[13px] text-ink-soft">Sahibinden, Hepsiemlak ve benzerine yapıştırmak için</span></span>
        <span className="text-[18px] text-ink-soft">{open ? '–' : '+'}</span>
      </button>
      {open && (
        <div className="space-y-3 px-4 pb-4">
          <div>
            <div className="mb-1 flex items-center justify-between"><label className="label">Başlık</label><button type="button" onClick={() => copy('t', title)} className="btn-ink btn-sm">{ok === 't' ? 'Kopyalandı' : 'Kopyala'}</button></div>
            <input readOnly value={title} className="field w-full" onFocus={(e) => e.currentTarget.select()} />
          </div>
          <div>
            <div className="mb-1 flex items-center justify-between"><label className="label">Açıklama</label><button type="button" onClick={() => copy('b', body)} className="btn-ink btn-sm">{ok === 'b' ? 'Kopyalandı' : 'Kopyala'}</button></div>
            <textarea readOnly value={body} rows={10} className="field w-full resize-y leading-relaxed" onFocus={(e) => e.currentTarget.select()} />
          </div>
          <p className="text-[12px] text-ink-soft">Metin sipariş bilgilerinizden otomatik oluşturuldu. Yayımlamadan önce gözden geçirip düzenleyebilirsiniz.</p>
        </div>
      )}
    </div>
  );
}