'use client';

import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { SectionType, SECTION_COLORS } from '@/types/audio';

interface SectionPickerProps {
  onSelect: (type: SectionType) => void;
  onClose: () => void;
  className?: string;
}

const sectionTypes: { type: SectionType; label: string }[] = [
  { type: 'intro', label: 'Intro' },
  { type: 'verse', label: 'Verse' },
  { type: 'chorus', label: 'Chorus' },
  { type: 'drop', label: 'Drop' },
  { type: 'bridge', label: 'Bridge' },
  { type: 'outro', label: 'Outro' },
];

export function SectionPicker({ onSelect, onClose, className }: SectionPickerProps) {
  return (
    <Card
      className={cn(
        'absolute z-50 p-3 bg-card border border-border shadow-xl min-w-[180px]',
        className
      )}
      onClick={(e) => e.stopPropagation()}
    >
      <div className="text-xs font-medium text-muted-foreground uppercase mb-2">
        Add Section
      </div>
      <div className="grid grid-cols-2 gap-2">
        {sectionTypes.map(({ type, label }) => (
          <button
            key={type}
            className={cn(
              'px-4 py-2 rounded-md text-sm font-medium text-white text-center',
              'hover:brightness-110 transition-all'
            )}
            style={{ backgroundColor: SECTION_COLORS[type] }}
            onClick={() => {
              onSelect(type);
              onClose();
            }}
          >
            {label}
          </button>
        ))}
      </div>
      <Button
        variant="ghost"
        size="sm"
        className="w-full mt-2 h-8 text-xs"
        onClick={onClose}
      >
        Cancel
      </Button>
    </Card>
  );
}