import type { BasicPlan, UsagePlanInfo } from '../../type'
import type { PlanRange } from '../plan-switcher/plan-range-switcher'
import Divider from '@/app/components/base/divider'
import { Plan, SelfHostedPlan } from '../../type'
import CloudPlanItem from './cloud-plan-item'
import SelfHostedPlanItem from './self-hosted-plan-item'

type PlansProps = {
  plan: {
    type: Plan
    usage: UsagePlanInfo
    total: UsagePlanInfo
  }
  currentPlan: string
  planRange: PlanRange
  canPay: boolean
}

const Plans = ({ plan, currentPlan, planRange, canPay }: PlansProps) => {
  const currentPlanType: BasicPlan = plan.type === Plan.enterprise ? Plan.team : plan.type
  return (
    <div className="flex w-full justify-center border-t border-divider-accent px-10">
      <div className="flex max-w-[1680px] grow border-x border-divider-accent">
        {currentPlan === 'cloud' && (
          <>
            <CloudPlanItem
              currentPlan={currentPlanType}
              plan={Plan.sandbox}
              planRange={planRange}
              canPay={canPay}
            />
            <Divider type="vertical" className="mx-0 shrink-0 bg-divider-accent" />
            <CloudPlanItem
              currentPlan={currentPlanType}
              plan={Plan.professional}
              planRange={planRange}
              canPay={canPay}
            />
            <Divider type="vertical" className="mx-0 shrink-0 bg-divider-accent" />
            <CloudPlanItem
              currentPlan={currentPlanType}
              plan={Plan.team}
              planRange={planRange}
              canPay={canPay}
            />
          </>
        )}
        {currentPlan === 'self' && (
          <>
            <SelfHostedPlanItem plan={SelfHostedPlan.community} />
            <Divider type="vertical" className="mx-0 shrink-0 bg-divider-accent" />
            <SelfHostedPlanItem plan={SelfHostedPlan.premium} />
            <Divider type="vertical" className="mx-0 shrink-0 bg-divider-accent" />
            <SelfHostedPlanItem plan={SelfHostedPlan.enterprise} />
          </>
        )}
      </div>
    </div>
  )
}

export default Plans
