import React from 'react';
import '@styles/buildpc.css';
import { Metadata } from 'next';
import { Breadcrumb } from '@/components/Common/Breadcrumb';

import Slider from '@/app/buildpc/Slider';

export const metadata: Metadata = {
  title: 'Build PC - Xây dựng cấu hình máy tính PC giá rẻ chuẩn nhất',
  description:
    'Build pc gaming giá rẻ nhất 2025 - Tự build PC đơn giản nhất - Xây dựng cấu hình máy tính PC với mọi nhu cầu gaming, đồ họa, văn phòng phù hợp với ngân sách',
};

export default function BuildPcPage() {
  const breadcrumbItems = [{ name: 'Build PC', url: '/buildpc' }];

  return (
    <>
      <div className="container">
        <Breadcrumb items={breadcrumbItems} />
      </div>
      <div className="build-pc pc">
        <div className="content container">
          <div
            className="build-pc_content"
            style={{ background: '#fff', padding: '20px', marginTop: '0px' }}
          >
            <Slider />

            <h1
              style={{
                fontSize: '30px',
                lineHeight: '36px',
                marginBottom: '10px',
                textAlign: 'center',
                fontWeight: 500,
              }}
            >
              Build PC - Xây dựng cấu hình máy tính PC giá rẻ chuẩn nhất
            </h1>
            <h2
              style={{
                fontSize: '26px',
                lineHeight: '30px',
                marginBottom: '10px',
                fontWeight: 500,
              }}
            >
              Chọn linh kiện xây dựng cấu hình - Tự build PC
            </h2>

            {/* tab */}
            <ul
              className="list-btn-action list-btn-action-new"
              style={{
                marginTop: 10,
                float: 'left',
                border: 'none',
                width: '100%',
                marginBottom: 20,
              }}
            >
              <li style={{ width: 'auto' }} className="active">
                <span style={{ padding: '0 20px' }}>Cấu hình 1</span>
              </li>
              <li style={{ width: 'auto' }}>
                <span style={{ padding: '0 20px' }}>Cấu hình 2</span>
              </li>
              <li style={{ width: 'auto' }}>
                <span style={{ padding: '0 20px' }}>Cấu hình 3</span>
              </li>
              <li style={{ width: 'auto' }}>
                <span style={{ padding: '0 20px' }}>Cấu hình 4</span>
              </li>
              <li style={{ width: 'auto' }}>
                <span style={{ padding: '0 20px' }}>Cấu hình 5</span>
              </li>
            </ul>
            <div className="clear"></div>
          </div>
        </div>
      </div>
    </>
  );
}