import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select } from "@/components/ui/select"

export default function AuthSignup() {
  return (
    <section className="flex min-h-[36rem] items-center justify-center px-6 py-16">
      <div className="w-full max-w-sm">
        <Card>
          <CardHeader>
            <CardTitle>Create your account</CardTitle>
            <p className="text-sm text-muted">
              Free for one project. No card until you outgrow it.
            </p>
          </CardHeader>

          <CardContent>
            <form className="space-y-4">
              <div className="space-y-1.5">
                <Label htmlFor="signup-name" required>
                  Name
                </Label>
                <Input
                  id="signup-name"
                  autoComplete="name"
                  placeholder="Ada Lovelace"
                  required
                />
              </div>

              <div className="space-y-1.5">
                <Label htmlFor="signup-email" required>
                  Work email
                </Label>
                <Input
                  id="signup-email"
                  type="email"
                  autoComplete="email"
                  placeholder="you@company.com"
                  required
                />
              </div>

              <div className="space-y-1.5">
                <Label htmlFor="signup-password" required>
                  Password
                </Label>
                <Input
                  id="signup-password"
                  type="password"
                  autoComplete="new-password"
                  required
                />
                <p className="text-xs text-muted">At least 12 characters.</p>
              </div>

              <div className="space-y-1.5">
                <Label htmlFor="signup-size">Team size</Label>
                <Select id="signup-size" defaultValue="2-10">
                  <option value="1">Just me</option>
                  <option value="2-10">2–10 people</option>
                  <option value="11-50">11–50 people</option>
                  <option value="51+">51 or more</option>
                </Select>
              </div>

              <label className="flex items-start gap-2 text-sm text-muted">
                <Checkbox name="terms" required className="mt-0.5" />
                <span>
                  I agree to the{" "}
                  <a href="#" className="text-fg underline underline-offset-4">
                    terms
                  </a>{" "}
                  and the{" "}
                  <a href="#" className="text-fg underline underline-offset-4">
                    privacy policy
                  </a>
                  .
                </span>
              </label>

              <Button type="submit" className="w-full">
                Create account
              </Button>
            </form>
          </CardContent>

          <CardFooter className="justify-center text-sm text-muted">
            Already have one?{" "}
            <a href="#" className="font-medium text-fg underline underline-offset-4">
              Sign in
            </a>
          </CardFooter>
        </Card>
      </div>
    </section>
  )
}