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

import Label from '@/components/common/Label'
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">
	    {/* タグ */}
	    <div>
	      <Label>タグ</Label>
	      <TagInput
		  value={tagName}
		  setValue={setTagName}/>
	    </div>

	    {/* 親タグ */}
	    <div>
	      <Label>親タグ</Label>
	      <TagInput
		  value={parentTagName}
		  setValue={setParentTagName}/>
	    </div>
	  </form>
	</div>
      </MainArea>)
}

export default MaterialSearchPage