import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

export const VideoShareForm: React.FC<{ onCancel: () => void; onShare: (videoUrl: string, videoName: string) => void }> = ({ onCancel, onShare }) => {
  const [videoUrl, setVideoUrl] = useState('');
  const [videoName, setVideoName] = useState('');

  const handleShare = () => {
    onShare(videoUrl, videoName);
  };

  return (
    <div data-alt="video-share-form-container" className="backdrop-blur-lg bg-white/30 dark:bg-slate-900/30 rounded-lg p-6 shadow-lg">
      <h2 data-alt="form-title" className="text-2xl font-bold mb-4 text-slate-800 dark:text-slate-200">转发视频</h2>
      <div data-alt="form-fields" className="space-y-4">
        <div data-alt="video-url-field" className="flex flex-col gap-2">
          <label htmlFor="videoUrl" className="text-sm font-medium text-slate-700 dark:text-slate-300">视频链接</label>
          <Input
            id="videoUrl"
            value={videoUrl}
            onChange={(e) => setVideoUrl(e.target.value)}
            placeholder="请输入视频链接"
            className="bg-white/50 dark:bg-slate-800/50 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100"
          />
        </div>
        <div data-alt="video-name-field" className="flex flex-col gap-2">
          <label htmlFor="videoName" className="text-sm font-medium text-slate-700 dark:text-slate-300">视频名称</label>
          <Input
            id="videoName"
            value={videoName}
            onChange={(e) => setVideoName(e.target.value)}
            placeholder="请输入视频名称"
            className="bg-white/50 dark:bg-slate-800/50 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-100"
          />
        </div>
      </div>
      <div data-alt="form-actions" className="mt-6 flex justify-end gap-2">
        <Button
          variant="outline"
          onClick={onCancel}
          data-alt="cancel-button"
          className="border-slate-400 dark:border-slate-600 text-slate-800 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800"
        >
          取消
        </Button>
        <Button
          onClick={handleShare}
          data-alt="share-button"
          className="bg-blue-500 hover:bg-blue-600 text-white"
        >
          一键转发
        </Button>
      </div>
    </div>
  );
};