'use client';

import { useMemo, useState } from 'react';
import type { CheckInPhrase } from '@/entities/session';
import { Chip } from '@/shared/ui';

interface CompactCheckInChipsProps {
  phrases: CheckInPhrase[];
  onCheckIn: (message: string) => void;
  collapsedCount?: number;
}

export const CompactCheckInChips = ({
  phrases,
  onCheckIn,
  collapsedCount = 3,
}: CompactCheckInChipsProps) => {
  const [showAll, setShowAll] = useState(false);

  const visiblePhrases = useMemo(() => {
    if (showAll) {
      return phrases;
    }

    return phrases.slice(0, collapsedCount);
  }, [collapsedCount, phrases, showAll]);

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-1.5">
        {visiblePhrases.map((phrase) => (
          <Chip
            key={phrase.id}
            onClick={() => onCheckIn(phrase.text)}
            className="!px-2.5 !py-1 text-[11px]"
          >
            {phrase.text}
          </Chip>
        ))}
      </div>

      {phrases.length > collapsedCount ? (
        <button
          type="button"
          onClick={() => setShowAll((current) => !current)}
          className="text-[11px] text-white/65 transition hover:text-white"
        >
          {showAll ? '접기' : '더보기'}
        </button>
      ) : null}
    </div>
  );
};