import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Slider } from '@/components/ui/slider';
import { Switch } from '@/components/ui/switch';
import { Card, CardContent } from '@/components/ui/card';
import { UploadCloud, Scissors, Music, Image, Settings, Video } from 'lucide-react';

export default function CapcutCloneEditor() {
  const [selectedTab, setSelectedTab] = useState('video');

  return (
    <div className="p-4 grid gap-4">
      <h1 className="text-3xl font-bold">Capcut+ Video Editor</h1>

      <Tabs defaultValue="video" onValueChange={setSelectedTab}>
        <TabsList className="grid grid-cols-6 gap-2">
          <TabsTrigger value="video"><Video className="w-4 h-4 mr-1" />Video</TabsTrigger>
          <TabsTrigger value="audio"><Music className="w-4 h-4 mr-1" />Audio</TabsTrigger>
          <TabsTrigger value="text"><Scissors className="w-4 h-4 mr-1" />Text</TabsTrigger>
          <TabsTrigger value="images"><Image className="w-4 h-4 mr-1" />Images</TabsTrigger>
          <TabsTrigger value="effects"><UploadCloud className="w-4 h-4 mr-1" />Effects</TabsTrigger>
          <TabsTrigger value="advanced"><Settings className="w-4 h-4 mr-1" />Advanced</TabsTrigger>
        </TabsList>

        {/* Video Upload & Trim */}
        <TabsContent value="video">
          <Card>
            <CardContent className="p-4 space-y-4">
              <Input type="file" accept="video/*" />
              <label>Trim Video</label>
              <Slider min={0} max={100} defaultValue={[10, 90]} />
              <label>Speed Control</label>
              <Slider min={0.5} max={2.0} step={0.1} defaultValue={[1]} />
            </CardContent>
          </Card>
        </TabsContent>

        {/* Audio Upload & Edit */}
        <TabsContent value="audio">
          <Card>
            <CardContent className="p-4 space-y-4">
              <Input type="file" accept="audio/*" />
              <label>Volume</label>
              <Slider min={0} max={100} defaultValue={[80]} />
              <label>Fade In/Out</label>
              <Slider min={0} max={10} step={0.5} defaultValue={[2]} />
            </CardContent>
          </Card>
        </TabsContent>

        {/* Text Overlays */}
        <TabsContent value="text">
          <Card>
            <CardContent className="p-4 space-y-4">
              <Input placeholder="Add text overlay..." />
              <label>Font Size</label>
              <Slider min={10} max={100} defaultValue={[24]} />
              <label>Font Color</label>
              <Input type="color" />
              <Switch /> Enable shadow
            </CardContent>
          </Card>
        </TabsContent>

        {/* Image Overlays */}
        <TabsContent value="images">
          <Card>
            <CardContent className="p-4 space-y-4">
              <Input type="file" accept="image/*" multiple />
              <label>Opacity</label>
              <Slider min={0} max={100} defaultValue={[100]} />
            </CardContent>
          </Card>
        </TabsContent>

        {/* Visual Effects */}
        <TabsContent value="effects">
          <Card>
            <CardContent className="p-4 space-y-4">
              <label>Choose effect</label>
              <select className="w-full p-2 border rounded">
                <option>Blur</option>
                <option>Shake</option>
                <option>Zoom In/Out</option>
                <option>Color Shift</option>
              </select>
              <label>Intensity</label>
              <Slider min={0} max={10} step={1} defaultValue={[5]} />
            </CardContent>
          </Card>
        </TabsContent>

        {/* Advanced Settings */}
        <TabsContent value="advanced">
          <Card>
            <CardContent className="p-4 space-y-4">
              <label>Render Quality</label>
              <select className="w-full p-2 border rounded">
                <option>1080p</option>
                <option>4K</option>
                <option>720p</option>
              </select>
              <label>Frame Rate</label>
              <select className="w-full p-2 border rounded">
                <option>24 FPS</option>
                <option>30 FPS</option>
                <option>60 FPS</option>
              </select>
              <label>Export Format</label>
              <select className="w-full p-2 border rounded">
                <option>MP4</option>
                <option>WEBM</option>
                <option>GIF</option>
              </select>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      <Button className="mt-4 w-full">Export Project</Button>
    </div>
  );
}


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>