import { Stat } from '@/app/stat'
import { Divider } from '@/components/divider'
import { Heading, Subheading } from '@/components/heading'
import { Select } from '@/components/select'
import { getRecentOrders } from '@/data'

export default async function Home() {
  let orders = await getRecentOrders()

  return (
    <>
      <Heading>Overview</Heading>
      <div className="mt-18 flex items-end justify-between">
        <Subheading>Orders Overview</Subheading>
        <div>
          <Select name="period">
            <option value="last_week">최근 1주일</option>
            <option value="last_month">최근 1개월</option>
            <option value="last_quarter">최근 3개월</option>
            <option value="last_year">최근 1년</option>
          </Select>
        </div>
      </div>
      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
        <Stat title="총 판매금액(원)" value="2,600,000" change="+3.5%" />
        <Stat title="애셋 판매(원)" value="1,200,000" change="-0.5%" />
        <Stat title="텍스처 판매(원)" value="1,400,000" change="+4.5%" />
        <Stat title="총 주문(건)" value="1,030" change="+1.5%" />
      </div>
      {/* <Divider className="mt-10 mb-10" /> */}

      <div className="mt-18 flex items-end justify-between">
        <Subheading>Products Overview</Subheading>
        <div>
          <Select name="period">
            <option value="last_week">최근 1주일</option>
            <option value="last_month">최근 1개월</option>
            <option value="last_quarter">최근 3개월</option>
            <option value="last_year">최근 1년</option>
          </Select>
        </div>
      </div>
      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
        <Stat title="애셋" value="21,200" change="-0.5%" />
        <Stat title="텍스처" value="121,400" change="+4.5%" />
        <Stat title="판매" value="231,030" change="+1.5%" />
        <Stat title="미판매" value="352,630" change="+3.5%" />
      </div>
      {/* <Divider className="mt-10 mb-10" /> */}

      <div className="mt-18 flex items-end justify-between">
        <Subheading>Users Overview</Subheading>
        <div>
          <Select name="period">
            <option value="last_week">최근 1주일</option>
            <option value="last_month">최근 1개월</option>
            <option value="last_quarter">최근 3개월</option>
            <option value="last_year">최근 1년</option>
          </Select>
        </div>
      </div>
      <div className="mt-4 grid gap-8 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4">
        <Stat title="일반" value="3,630" change="+3.5%" />
        <Stat title="기관" value="1,200" change="-0.5%" />
        <Stat title="기업" value="1,400" change="+4.5%" />
        <Stat title="교육" value="1,030" change="+1.5%" />
      </div>
      {/* <Divider className="mt-10 mb-10" /> */}
    </>
  )
}
