"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { StarRating } from "@/components/ui/star-rating"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

interface ReviewFormProps {
    onSubmit: (data: { blurb: string; content: string; score: number }) => void
}

export function ReviewForm({ onSubmit }: ReviewFormProps) {
    const [blurb, setBlurb] = useState("")
    const [content, setContent] = useState("")
    const [score, setScore] = useState(0)

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault()
        if (!blurb.trim() || !content.trim() || score === 0) return

        onSubmit({ blurb, content, score })
        setBlurb("")
        setContent("")
        setScore(0)
    }

    return (
        <Card>
            <CardHeader>
                <CardTitle>Write a Review</CardTitle>
            </CardHeader>
            <CardContent>
                <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="space-y-2">
                        <label className="text-sm font-medium">Rating</label>
                        <StarRating value={score} onChange={setScore} />
                    </div>

                    <div className="space-y-2">
                        <label className="text-sm font-medium">The "One-Liner" (Blurb)</label>
                        <Input
                            placeholder="Sum it up in a sentence..."
                            value={blurb}
                            onChange={(e) => setBlurb(e.target.value)}
                            required
                        />
                    </div>

                    <div className="space-y-2">
                        <label className="text-sm font-medium">Full Review</label>
                        <Textarea
                            placeholder="Tell us everything..."
                            value={content}
                            onChange={(e) => setContent(e.target.value)}
                            required
                            className="min-h-[150px]"
                        />
                    </div>

                    <Button type="submit" disabled={!blurb.trim() || !content.trim() || score === 0}>
                        Post Review
                    </Button>
                </form>
            </CardContent>
        </Card>
    )
}