Support

import { useState } from 'react';
import { KanbanBoard, AvatarRow, Textarea, AiInput, PillBadge } from '@cleen/cleen-components';
import { useTicket } from '@/hooks/useTicket';

export function TicketDetail({ ticketId }) {
  const { ticket, comments, addComment } = useTicket(ticketId);
  const [draft, setDraft] = useState('');

  if (!ticket) return null;

  return (
    <div className="ticket-detail">
      <header>
        <h1>{ticket.subject}</h1>
        <PillBadge tone={ticket.status === 'open' ? 'warn' : 'success'}>{ticket.status}</PillBadge>
        <AvatarRow users={ticket.participants} />
      </header>
      <KanbanBoard.Column items={comments} render={(c) => <CommentCard comment={c} />} />
      <AiInput value={draft} onChange={setDraft} placeholder="Reply or ask the AI to draft one…" />
      <button onClick={() => addComment(draft)}>Send reply</button>
    </div>
  );
}