'use client';

import { TagInput } from '@/components/ui/TagInput';
import { RelatedTodos } from '@/components/forms/RelatedTodos';

interface TaskTagsSectionProps {
  taskId: string;
  tags: string[];
  primaryTagId?: string;
  onTagsChange: (tags: string[]) => void;
  onPrimaryTagChange: (tagId: string | undefined) => void;
}

export function TaskTagsSection({
  taskId,
  tags,
  primaryTagId,
  onTagsChange,
  onPrimaryTagChange,
}: TaskTagsSectionProps) {
  return (
    <>
      {/* Tags */}
      <div className="space-y-3">
        <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
          Tags
          <span className="text-xs normal-case ml-2 text-[var(--muted-foreground)]">
            (cliquer sur un tag pour le sélectionner comme prioritaire)
          </span>
        </label>

        <TagInput
          tags={tags || []}
          primaryTagId={primaryTagId}
          onPrimaryTagChange={onPrimaryTagChange}
          onChange={onTagsChange}
          placeholder="Ajouter des tags..."
          maxTags={10}
        />
      </div>

      {/* Todos reliés */}
      <RelatedTodos taskId={taskId} />
    </>
  );
}
