"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export function BasicSettings({ onNext }: { onNext: () => void }) {
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [category, setCategory] = useState("")

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // 保存基本设置数据的逻辑
    onNext()
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>基本设置</CardTitle>
        <CardDescription>配置场景的基本信息</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">场景名称</Label>
            <Input
              id="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="请输入场景名称"
              required
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="category">场景类别</Label>
            <Select value={category} onValueChange={setCategory} required>
              <SelectTrigger id="category">
                <SelectValue placeholder="选择场景类别" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="marketing">营销场景</SelectItem>
                <SelectItem value="service">服务场景</SelectItem>
                <SelectItem value="operation">运营场景</SelectItem>
                <SelectItem value="sales">销售场景</SelectItem>
                <SelectItem value="other">其他</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <Label htmlFor="description">场景描述</Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="请输入场景描述"
              rows={4}
            />
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" type="button">
            取消
          </Button>
          <Button type="submit">下一步</Button>
        </CardFooter>
      </form>
    </Card>
  )
}