"use client";

import { useRoomEntry } from "../hooks/useRoomEntry";

export const RoomEntryForm = () => {
  const { focusGoal, setFocusGoal, canEnterRoom, handleSubmit } = useRoomEntry();

  return (
    <form
      onSubmit={handleSubmit}
      className="flex w-full flex-col gap-3 sm:flex-row sm:items-center"
    >
      <input
        type="text"
        value={focusGoal}
        onChange={(event) => setFocusGoal(event.target.value)}
        placeholder="오늘 무엇에 집중할까요?"
        className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-brand-dark placeholder:text-brand-dark/45 focus:border-brand-primary/45 focus:bg-white focus:outline-none sm:flex-1"
      />
      <button
        type="submit"
        aria-label="가상공간 입장"
        disabled={!canEnterRoom}
        className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-brand-primary text-white transition hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:bg-slate-300 sm:shrink-0"
      >
        <svg aria-hidden viewBox="0 0 20 20" fill="none" className="h-5 w-5">
          <path
            d="M5 10h10M11 6l4 4-4 4"
            stroke="currentColor"
            strokeWidth="1.8"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      </button>
    </form>
  );
};