/**
 * ProjectDetailView — files tab.
 */
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { FileAudio, HardDrive, Play, MoreHorizontal, Upload } from 'lucide-react';
import type { ProjectFile } from './types';

interface ProjectDetailViewFilesProps {
  projectFiles: ProjectFile[];
}

export function ProjectDetailViewFiles({ projectFiles }: ProjectDetailViewFilesProps) {
  return (
    <Card variant="default">
      <div className="flex justify-between items-center mb-6">
        <h3 className="font-bold text-white">Project Files</h3>
        <Button variant="secondary" size="sm" icon={<Upload className="w-4 h-4" />}>
          Upload
        </Button>
      </div>
      <div className="space-y-2">
        {projectFiles.map((file) => (
          <div
            key={file.id}
            className="flex items-center justify-between p-4 bg-kodo-ink rounded-lg border border-transparent hover:border-kodo-steel transition-all group"
          >
            <div className="flex items-center gap-4">
              <div className="w-10 h-10 bg-kodo-slate rounded flex items-center justify-center text-kodo-content-dim">
                {file.type === 'audio' ? (
                  <FileAudio className="w-5 h-5" />
                ) : (
                  <HardDrive className="w-5 h-5" />
                )}
              </div>
              <div>
                <div className="font-bold text-sm text-white">{file.name}</div>
                <div className="text-xs text-kodo-content-dim">
                  {file.size} • {file.date}
                </div>
              </div>
            </div>
            <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
              <Button variant="ghost" size="icon">
                <Play className="w-4 h-4" />
              </Button>
              <Button variant="ghost" size="icon">
                <MoreHorizontal className="w-4 h-4" />
              </Button>
            </div>
          </div>
        ))}
      </div>
    </Card>
  );
}
