veza/apps/web/src/components/studio/projects/project-detail-view/ProjectDetailViewFiles.tsx

/**
 * 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-foreground tracking-tight">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-card rounded-xl border border-transparent hover:border-border transition-all duration-[var(--duration-normal)] 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-foreground">{file.name}</div>
                <div className="text-xs text-muted-foreground">
                  {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>
  );
}