"use client";

import React from 'react';

import { cn } from "@/lib/utils";

const TABLE_DATA = [

{

language: "Python",

since: "1991",

file: ".py",

gc: true,

color: "bg-[#3776AB]",

svg: (

<svg viewBox="0 0 128 128" className="w-3 h-3 fill-white">

<path d="M64.754 14.866c-13.918 0-26.685.908-26.685 12.184v12.51H64.91v3.13H24.316c-12.75 0-21.26 10.375-21.26 25.02 0 14.372 7.747 24.394 20.323 24.394h6.88v-12.82c0-14.775 12.146-27.18 26.685-27.18h26.25v-12.51c0-12.203-9.52-24.717-38.44-24.717zm-14.07 7.505c2.31 0 4.17 1.862 4.17 4.172 0 2.308-1.86 4.17-4.17 4.17-2.31 0-4.172-1.862-4.172-4.17 0-2.31 1.862-4.172 4.172-4.172zm43.15 15.638v12.82c0 14.776-12.333 27.18-26.87 27.18H39.816v12.51c0 12.202 10.457 24.716 39.38 24.716 13.92 0 27.123-.74 27.123-12.016v-12.51H78.85v-3.13h41.034c12.75 0 21.074-10.375 21.074-25.02 0-14.373-7.56-24.395-20.136-24.395H93.834zM78.683 100.82c2.31 0 4.17 1.86 4.17 4.17 0 2.31-1.86 4.172-4.17 4.172-2.31 0-4.172-1.862-4.172-4.172 0-2.31 1.862-4.17 4.172-4.17z"/>

</svg>

)

},

{

language: "Go",

since: "2009",

file: ".go",

gc: true,

color: "bg-[#00ADD8]",

svg: (

<svg viewBox="0 0 128 128" className="w-3.5 h-3.5 fill-white ml-[1px]">

<path d="M48.835 77.014c-13.627 0-25.267-8.625-28.528-20.898-3.418-12.868 4.25-26.068 17.118-29.486 10.96-2.91 22.42.923 28.536 10.15l-11.455 8.163c-3.116-4.698-9.458-6.196-14.475-3.328-5.32 3.04-7.25 9.873-4.266 15.15 3.078 5.44 10.233 7.234 15.602 3.86 2.876-1.808 4.673-4.908 4.905-8.286H40.6v-12.42h30.297v3.52c-.443 19.345-13.568 33.575-33.576 33.575zm36.953.766c-13.333 0-24.14-10.806-24.14-24.14 0-13.332 10.807-24.14 24.14-24.14s24.14 10.808 24.14 24.14c0 13.334-10.807 24.14-24.14 24.14zm0-35.03c-6.014 0-10.89 4.875-10.89 10.89s4.876 10.89 10.89 10.89c6.016 0 10.89-4.875 10.89-10.89s-4.874-10.89-10.89-10.89z" />

</svg>

)

},

{

language: "Rust",

since: "2015",

file: ".rs",

gc: false,

color: "bg-[#E43716]",

svg: (

<svg viewBox="0 0 128 128" className="w-3.5 h-3.5 fill-white">

<path d="M109.11 60.106c.404-1.288 1.95-1.572 2.76-.514 2.812 3.666 5.253 7.6 7.284 11.758.553 1.135-.145 2.502-1.233 2.56-5.877.307-11.737 1.258-17.476 2.83-.872.24-1.488-.69-.974-1.42 2.723-3.882 4.985-8.01 6.744-12.33.155-.38.544-.72.894-.884zm-6.223 16.326c-.328-1.31-1.353-2.148-2.614-2.176-5.83-.125-11.666.368-17.426 1.472-.888.17-1.144 1.25-.436 1.764 3.738 2.72 7.155 5.827 10.183 9.255.263.298.396.767.336 1.157-.59 3.865-1.558 7.674-2.88 11.37-.417.986.72 1.83 1.57 1.168 3.52-2.75 6.76-5.817 9.68-10.378.718-1.12.203-2.62-1.026-3.08-4.823-1.802-9.457-4.004-13.844-6.577-1.547-.91-1.35-3.072.278-3.708 5.626-2.193 11.458-3.9 17.428-5.094.492-.1 1.205-.584 1.34-1.116zm-17.07 23.364c-.958-.958-2.484-.523-2.75.807-1.135 5.76-2.81 11.418-4.996 16.86-.334.838.654 1.626 1.4 1.077 3.633-2.673 7.037-5.632 10.174-8.835 1.078-1.103.733-2.91-.567-3.486-4.966-2.194-9.768-4.736-14.35-7.592-1.226-.763-2.585.666-1.722 1.826 3.01 4.043 5.748 8.283 8.167 12.668.647 1.173 2.378 1.343 3.123.284 2.808-3.987 5.328-8.173 7.525-12.51.527-1.04-.374-2.072-1.354-1.825-4.492 1.133-9.083 1.93-13.722 2.383-.342.033-.765-.183-.928-.53z" />

</svg>

)

}

];

export function DataTable({ className }: { className?: string }) {

return (

<div className={cn("w-full max-w-[calc(100vw-32px)] md:max-w-[560px] bg-gradient-to-b from-white from-30% to-[#EBE9EB] dark:from-[#1C1C1E] dark:to-[#0A0A0C] rounded-2xl border border-black/5 dark:border-white/5 hover:border-black/10 dark:hover:border-white/20 shadow-[0_4px_24px_rgba(0,0,0,0.04)] dark:shadow-[0_4px_24px_rgba(0,0,0,0.4)] hover:shadow-[0_12px_40px_rgba(0,0,0,0.08)] dark:hover:shadow-[0_12px_40px_rgba(0,0,0,0.6)] overflow-hidden font-matter transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]", className)}>

<div className="w-full overflow-x-auto scrollbar-none [-webkit-overflow-scrolling:touch]">

<table className="w-full min-w-[320px] md:min-w-0 text-left border-collapse">

<thead>

<tr className="bg-black/[0.02] dark:bg-[#141416]/95 border-b border-black/5 dark:border-white/5 text-[11px] sm:text-[12px] font-medium text-zinc-500 dark:text-[#86868B] font-mono uppercase tracking-wider">

<th className="px-3 sm:px-4 md:px-6 py-2.5 w-[35%]">Language</th>

<th className="px-3 sm:px-4 md:px-6 py-2.5 w-[25%]">Since</th>

<th className="px-3 sm:px-4 md:px-6 py-2.5 w-[20%]">File</th>

<th className="px-3 sm:px-4 md:px-6 py-2.5 w-[20%]">GC</th>

</tr>

</thead>

<tbody className="text-[12.5px] sm:text-[13.5px] text-zinc-900 dark:text-[#F5F5F7] font-medium tracking-tight">

{TABLE_DATA.map((row, i) => (

<tr

key={row.language}

className={cn(

"group transition-colors hover:bg-black/[0.02] dark:hover:bg-white/[0.03]",

i !== TABLE_DATA.length - 1 && "border-b border-black/5 dark:border-white/5"

)}

>

<td className="px-3 sm:px-4 md:px-6 py-2.5 sm:py-3">

<div className="flex items-center gap-2 sm:gap-3">

<div className={cn("w-[20px] h-[20px] sm:w-[22px] sm:h-[22px] rounded-full flex items-center justify-center shadow-sm shrink-0", row.color)}>

{row.svg}

</div>

<span className="whitespace-nowrap">{row.language}</span>

</div>

</td>

<td className="px-3 sm:px-4 md:px-6 py-2.5 sm:py-3 text-zinc-500 dark:text-[#86868B] whitespace-nowrap">

{row.since}

</td>

<td className="px-3 sm:px-4 md:px-6 py-2.5 sm:py-3">

<code className="text-[11px] sm:text-[12px] font-mono text-zinc-600 dark:text-[#86868B] bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 px-1.5 sm:px-2 py-0.5 rounded-md whitespace-nowrap">

{row.file}

</code>

</td>

<td className="px-3 sm:px-4 md:px-6 py-2.5 sm:py-3">

{row.gc ? (

<svg width="15" height="15" viewBox="0 0 24 24" fill="none" className="stroke-emerald-500/90" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">

<polyline points="20 6 9 17 4 12"></polyline>

</svg>

) : (

<span className="text-zinc-300 dark:text-[#86868B]/40 font-normal">—</span>

)}

</td>

</tr>

))}

</tbody>

</table>

</div>

</div>

);

}