"use client";

import { useState } from "react";

export function UnderlineInput() {
  const [v, setV] = useState("");
  const [focused, setFocused] = useState(false);

  return (
    <div className="bg-[#FAFAF8] p-16 grid place-items-center min-h-[200px]">
      <div className="w-full max-w-xs">
        <label
          className="block font-mono text-[10px] uppercase tracking-[0.16em] text-[#6B6B66] mb-2"
          htmlFor="email"
        >
          Email address
        </label>
        <div className="relative">
          <input
            id="email"
            type="email"
            value={v}
            onChange={(e) => setV(e.target.value)}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            placeholder="name@studio.com"
            className="w-full bg-transparent border-0 border-b border-[#1111111A] py-2 text-[18px] text-[#111111] outline-none placeholder:text-[#6B6B66]/70"
            style={{ fontFamily: "'Instrument Serif', Georgia, serif" }}
          />
          <span
            className="absolute left-0 bottom-0 h-[2px] bg-[#2A3D2F] transition-all duration-500"
            style={{
              width: focused || v ? "100%" : "0%",
            }}
          />
        </div>
        <div className="font-mono text-[10px] text-[#6B6B66] mt-2">
          {v.length === 0
            ? "We never sell, never spam."
            : `${v.length} characters`}
        </div>
      </div>
    </div>
  );
}
Underline Input
