'use client'

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

export function ContactForm() {
  const [subject, setSubject] = useState('FlockOff Feedback')
  const [message, setMessage] = useState('')

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    const url = `mailto:help@flockoff.app?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}`
    window.location.href = url
  }

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-3">
      <Input
        value={subject}
        onChange={(e) => setSubject(e.target.value)}
        placeholder="Subject"
        className="font-mono text-sm"
      />
      <textarea
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Your feedback…"
        rows={5}
        className="w-full rounded-lg border border-border bg-card px-3 py-2.5 text-sm placeholder:text-[var(--fo-text3)] focus:outline-none focus:ring-2 focus:ring-ring resize-none transition-colors"
      />
      <Button type="submit" disabled={!message.trim()} className="self-start">
        Send feedback →
      </Button>
    </form>
  )
}