import { useState } from 'react'
import { Helmet } from 'react-helmet-async'

import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import TagInput from '@/components/common/TagInput'
import MainArea from '@/components/layout/MainArea'
import { SITE_TITLE } from '@/config'

import type { FC, FormEvent } from 'react'


const MaterialSearchPage: FC = () => {
  const [tagName, setTagName] = useState ('')
  const [parentTagName, setParentTagName] = useState ('')

  const handleSearch = (e: FormEvent) => {
    e.preventDefault ()
  }

  return (
      <MainArea>
	<Helmet>
	  <title>素材集 | {SITE_TITLE}</title>
	</Helmet>

	<div className="max-w-xl">
	  <PageTitle>素材集</PageTitle>

	  <form onSubmit={handleSearch} className="space-y-2">
	    {/* タグ */}
	    <FormField label="タグ">
	      {() => (
		  <TagInput
		      value={tagName}
		      setValue={setTagName}/>)}
	    </FormField>

	    {/* 親タグ */}
	    <FormField label="親タグ">
	      {() => (
		  <TagInput
		      value={parentTagName}
		      setValue={setParentTagName}/>)}
	    </FormField>
	  </form>
	</div>
      </MainArea>)
}

export default MaterialSearchPage
