'use client';

import * as React from 'react';

import {
  CoreValueAutoScale,
  CoreValueFastBoostrap,
  CoreValueFree,
  CoreValueTested,
  AutoScaleIcon,
  BranchIcon,
  GearIcon,
  BrainIcon,
} from '@/components/Icon';

const coreValueList = [
  {
    id: 'auto-scale',
    icon: CoreValueAutoScale,
    title: 'Auto Scale',
    description:
      'Scale storage and compute seamlessly, no manual effort needed.',
  },
  {
    id: 'fast-bootstrapping',
    icon: CoreValueFastBoostrap,
    title: 'Fast Bootstrapping',
    description:
      'Launch a fully managed cluster in seconds, no credit card required.',
  },
  {
    id: 'generous-free-tier',
    icon: CoreValueFree,
    title: 'Generous Free Tier',
    description:
      'Enjoy 25GiB of free storage and save 80% on costs versus RDS.',
  },
  {
    id: 'battle-tested',
    icon: CoreValueTested,
    title: 'Battle-Tested',
    description:
      'TiDB at the Core, proven in the toughest data scenarios worldwide.',
  },
];

const mobileCoreValueList = [
  {
    id: 'auto-scale',
    icon: AutoScaleIcon,
    title: 'Scale to ∞',
  },
  {
    id: 'branch',
    icon: BranchIcon,
    title: 'Branch Easily',
  },
  {
    id: 'data-api',
    icon: GearIcon,
    title: 'Data API',
  },
  {
    id: 'ai',
    icon: BrainIcon,
    title: 'AI Capability',
  },
];

export default function CoreValue(props: any) {
  return (
    <section className="custom-style-bg-bar mt-4 flex w-full flex-col items-center justify-center sm:mt-24">
      <div className="hidden max-w-7xl gap-4 gap-y-16 px-8 py-14 sm:grid sm:grid-cols-2 sm:gap-y-8 lg:grid-cols-4 lg:gap-y-4">
        {coreValueList.map((item) => (
          <CoreValueItem
            key={item.id}
            icon={<item.icon className="h-8" />}
            title={item.title}
            description={item.description}
          />
        ))}
      </div>
      <div className="grid max-w-7xl grid-cols-2 gap-2 gap-y-4 px-4 py-8 sm:hidden font-lexend">
        {mobileCoreValueList.map((item) => (
          <CoreValueItem
            key={item.id}
            icon={<item.icon className="inline h-4" />}
            title={item.title}
            description=""
            mobile
          />
        ))}
      </div>
    </section>
  );
}

export const CoreValueItem = (props: {
  title: string;
  description: string;
  icon: JSX.Element;
  mobile?: boolean;
}) => {
  const { icon, title, description, mobile } = props;

  if (mobile) {
    return (
      <div className="space-x-2">
        {icon}
        <span className="text-sm">{title}</span>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-start gap-4">
      <div className="flex flex-col gap-4">
        <div className="">{icon}</div>
        <label className="l3">{title}</label>
      </div>

      <p className="text-base leading-7">{description}</p>
    </div>
  );
};